这篇文章补充说明 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的结合体。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于