计算属性和观察者
watch 和 computed都可以用于监视数据的变动
观察者 watch
同angular一样，watch监视分为普通数据监视，和对象的属性监视，如果需要动态的监视对象的属性，我们需要采用深度监视模式，写法参考下面实例：
Document
计算属性 computed
computed相对于watch有哪些优点：
-
有缓存，只有在第一次使用的时候，方法会被调用。 方法调用后，结果就被缓存起来，下次使用的时候，直接从缓存中取数据
-
当 计算属性依赖的属性（lastName / firstName）发生变化以后，计算属性函数就会被重新调用执行（1次）
简单写法：
...var vm = new Vue({ el: '#app', data: { firstName: '赵四', lastName: '尼古拉斯' }, computed: { fullName: function() { console.log('计算属性 fullName 执行了'); //结果只执行一次，其他从缓存中读取，不会打印 return this.lastName + ' ' + this.firstName } } })
getter 和 setter设置
...var vm = new Vue({ el: '#app', data: { firstName: '赵四', lastName: '尼古拉斯' }, computed: { // 这种方式是下面 get 方法的简化形式： // fullName: function() { // console.log('计算属性 fullName 执行了'); // return this.lastName + ' ' + this.firstName // } fullName: { // get方法会在读取 fullName 计算属性值的时候，被调用 get: function() { console.log('读取计算属性的值'); return this.lastName + ' ' + this.firstName }, // set方法会在 修改 fullName 计算属性值的时候，被调用 // 如何修改fullName的值？？？ 修改对应文本框中的值即可 set: function(val) { // console.log('设置计算属性的值'); this.lastName = val.split(' ')[0] this.firstName = val.split(' ')[1] } } }
关闭缓存，每次都执行getter方法，重新获取
computed: { // 这种方式是下面 get 方法的简化形式： example: function() { // 关闭缓存，默认为true; cache:false, get:function(){ // 虽然data中数据没变，但是我们需要更新时间戳，所以需要去除缓存 return Date.now() + this.welcome; } }