《浅析Vue》之computed 和 watch区别

computed

computed是计算属性，是用来计算一个值的，这个值在调用时不需要加括号，可以直接当属性使用，同时computed会根据依赖的数据显示新的计算结果会被缓存。如果一个数据依赖于其他数据，那么把这个数据设计为computed。

实例:

<div id="example"> 
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
   el: '#example', 
   data: { 
     message: 'Hello' 
   }, 
   computed: { 
     // 计算属性的 getter 
     reversedMessage: function () { 
     // `this` 指向 vm 实例 
     return this.message.split('').reverse().join('') 
    } 
  } 
})

结果:

Original message: "Hello"

Computed reversed message: "olleH"

watch

watch是监听属性，当数据（属性）变化时，就执行一个函数，其特点是immediate和deep 。如果需要在某个数据变化时做一些事情，使用watch。

• 语法1

watch:{
    obj1:function(value,oldValue),      //function的参数是 Vue 传的
  obj2(){},     //ES6缩写
  obj3:[f1,f2],     //两个函数，依次执行f1和f2
  obj4:'methodName',        //methods里面找对应名字的函数
  obj5:{handler:fn,deep:true,immediate:true},  //{执行函数，是否deep看，第一次是否运行}
  obj6:'object.a':function(){}    //function有的版本可以省去
}

• 语法2

vm.$watch('xxx',fn,{deep:...,immediate:...}) //'xxx'可以改为一个返回字符串的函数

watch中this

watch中不要用箭头函数

const vm = new Vue({
    data: ...
    watch:{
        n:function(){
            this ===vm
        }
    }
})

这里的this代表全局变量，new Vue是函数的调用

immediate

Vue 默认第一次渲染的时候不执行watch。但 Vue 提供了 immediate 方法用于表示在第一次渲染的时候是否要执行 watch。

immediate:true/false  // 默认false不执行

deep

Vue 的数据中，简单类型看值，复杂类型(对象)看地址；Vue 提供了 deep 方法用于判断是否要看这个对象里面的属性的变化。

deep:true/false // 默认false 不深究