5、Vue_计算属性computed、监听属性watch

计算属性：computed

之前例子中，使用过vue的methods，computed和它的效果是一样的。只不过computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而methods在重新渲染的时候，函数总会重新调用执行
所以说，使用computed性能会更好。但是，如果不希望缓存时，就使用methods

• 字符串反转例子

• computed默认只有getter，不过在需要的时候，也可以定义一个setter
  例子，创建一个htnl文件：

var vm = new Vue({
  el: '#app',
  data: {
    name: 'lzl',
    age: 18
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.age
      },
      // setter
      set: function (newValue) {
        var values= newValue.split(' ')
        this.name = values[0]
        this.age= values[values.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.age也会被对应更新
vm.site = 'zl 20';
document.write('name: ' + vm.name);
document.write('
');
document.write('age: ' + vm.age);

监听属性：watch

• watch监听属性：监听数据的变化，然后触发对应的方法
• 类型：{ [key: string]: string | Function | Object | Array }
• [key: string]是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
• 场景：可以对项目的一些属性进行调试
• 例子：分秒之间的转换，并且文字提示，输入值就触发

    
    
    



    
    分：

    秒：

结果：

watch

• 增加值按钮，增加就触发

    
    
    



    

        
值：{{ value }}
        加1
    
    

结果：

image.png