这篇文章补充说明 watch、computed 属性。
参考： Vue 官方文档 https://cn.vuejs.org/v2/guide/
上一篇文章的链接：Vue 学习(四)——路由 http://www.honeybee.top/articles/2018/10/10/1539162461246.html
1. watch 属性
~watch 属性可以监视 data 中指定数据的变化, 然后触发这个 watch 中对应的 function 处理函数，下面用一个拼接字符串的例子说明：
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" /> +
<input type="text" v-model="lastname" /> =
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {},
//watch属性可以监视data中指定数据的变化, 然后触发这个watch中对应的function处理函数
watch: {
//函数中有两个形参，第一个为变化后的值，第二个为变化前的旧值
'firstname': function(newVal, oldVal) {
this.fullname = newVal + '+' + this.lastname;
},
'lastname': function(newVal) {
this.fullname = this.firstname + '+' + newVal;
}
}
});
</script>
</body>
</html>
运行结果如下，根据前面两个值的变化来拼接输入的字符串：
~watch 属性还可以监听非 DOM 元素的变化，下面的例子来监听路由地址的变化：
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h2>登录组件</h2>'
};
var register = {
template: '<h2>注册组件</h2>'
};
var routerObj = new VueRouter({
routes: [
{path: '/login', component: login},
{path: '/register', component: register}
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: routerObj,
watch: {
//监听路由的变化
'$route.path': function(newVal, oldVal) {
if(newVal === '/login') {
console.log('进入登录页面')
} else if(newVal === '/register') {
console.log('进入注册页面')
}
}
}
});
</script>
</body>
</html>
运行结果如下，路由的变化会触发 watch 里的监听函数：
2. computed 属性
~computed 中，可以定义一些[计算属性]来返回需要的结果，把上面拼接字符串的例子作下修改：
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" /> +
<input type="text" v-model="lastname" /> =
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
methods: {},
//computed中，可以定义一些[计算属性],计算属性是一个方法，但是在使用的时候,是把这个方法的名称直接当作属性来使用
computed: {
//直接用 fullname 来代表这个[计算属性]
//注意：[计算属性]function内部中任何data中的数据发生了变化，就会立即重新计算
//注意：[计算属性]方法的求值结果会被缓存起来，如果方法中的数据没有发生任何变化，那么再次引用的时候不会重新计算。
'fullname': function() {
return this.firstname + '+' + this.lastname;
}
}
});
</script>
</body>
</html>
运行结果和上面 watch 属性拼接字符串的例子是一样的：
3. watch、computed 和 methods 之间的对比
computed属性的结果会被缓存起来，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用；methods方法表示一个具体的操作，主要用来写业务逻辑；watch是一个对象，键是需要观察的表达式，值是对应的回调函数。主要用来监听特定数据的变化，从而进行具体的业务逻辑操作，可以看作是computed和methods的结合体。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于