Vue中watch和computed的对比

Vue中watch和computed的对比

共同点：

​ 都是根据数据的变化，对应的函数做出相应的动作。

不同点：

• computed根据data和props中的数据变换形成新的变量。watch只能监听中data和props中的数据。

• computed支持缓存（响应式依赖计算得到的值），而watch不支持缓存。

• computed不是处理异步操作。watch可以处理异步的操作。

• computed的属性值是函数，有着get和set两个方法，但是默认会走get方法。
  如果使用set方法，那么就需要手动改变新的变量的值，那么data中的值就会跟着改变。
  （注意： 虽然computed是函数的形式。但是使用跟变量一样，直接写名字就OK了）

let vm = new Vue({
    el: '#app',
    data: {
        firstName: '项',
        lastName: '宇'
    },
    computed: {
        //默认就是getter 方法
        fullname: function() {   //当然也可以使用ES6的简便写法
            return this.firstName + ' ' + this.lastName
        }
        
        //具体点的写法
        fullName: {   
            get: function() {
    	         return this.firstName + ' ' + this.lastName
	       },
            set: function(newValue) {   //如果要使用set方法的时候，就需要传递一个新值
    		   let names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
	       }
	      //如果调用vm实例的fullName = '刘邦'，那么firstName = '刘'， lastName = ‘邦’
    	}
    }
})

• watch的使用，如果数据发生改变时，就会触发函数（使用也是跟变量的形式一样的）

let vm = new Vue({
    el: '#app',
    data: {
        a: 'james',
        b: {
            name: 'james',
            age； 12
        }
    },
    watch: {
        a(newVal, oldVal) {  //这里两个参数，一个新值，一个旧值
            //...
        }
        
        //watch有个特点就是初始化的时候，并不会触发函数，只要当改变的时候就会触发函数。
        //但是如果我们想要最开始就执行函数(或者组件一创建，就需要执行)，那么就需要使用immediate属性，
        //那么对应的形式也会发生一些变化
        a: {
           handler: function(newVal, oldVal) {
    	        //...
	      },
           //当immediate为true时，就会立即执行，如果为false，则就跟一般的watch执行，数据变了执行
           immediate: true   
    	 }


	 //如果监听的数据为对象形式，如果对象内部的内容发生了变化，
         //就监听不到了，这是就需要使用deep这个属性
	 b: {
         handler: function(newVal, oldVal) {
           //...
	    },
         deep: true
        }
    }
})