vue-computed和watch

1.computed

computed计算属性：

1.computed计算属性是一个watcher，同时具备缓存能力，只有当依赖的属性发生改变时才会更新视图。当页面中有属性需求计算时，可以使用computed计算属性来代替。要用的属性不存在，通过已有的属性计算得来。

  let app = new Vue({
        el: "#app",
        data: {
            first: "wei",
            last: "xi",
        },
        computed:{
        fullname:{
        get(){
           return this.first+this.last
         }
        set(value){
           const names = value.split(" ");
           this.first = names[0];
           this.last = names[1];
         }
      }
    }

2.原理是借助Object.defineproperty方法提供的getter和setter

3.get函数什么时候会执行？

当初次读取时会执行一次

当依赖的数据发生改变的时会再次被调用

但是由于一般是只获取计算属性的get值，所以可以简写

 fullname:function(){
            return this.first+this.last
 }

2.watch 侦听器

1.watch是属于一个侦听器，和computed属性实现原理一样，都是watcher，只是watch不具备缓存

2.watch一般监听单个变量或者一个数组，对于监听基本的数据类型或者进行浅度监听，watch监听器可以得到一个oldValue和newValue值，但是进行深度监听无法得到oldValue值

3.watch进行深度监听 deep

监听单个属性，由于是对象中的属性名

data() {
	return {
		obj: {
			a: 1000
		}
	}
},
watch: {
	'obj.a': function(newValue, oldValue){
		// 监听单个属性时可以取到oldValue值
		console.log(newValue, oldValue)
	}
}

使用watch进行深度监听

使用deep：true进行深度监听时，会将监听的应用类型的属性层层遍历，都加上监听事件，这样会导致性能开销比较大，那么可以对引用数据类型内的单个属性进行监听

data() {
	return {
		obj: {
			a: 1000,
            b:80
		}
	}
},
watch: {
	obj: {
		// 深度监听中handler执行函数中的oldValue获取不到值
		handler(oldValue, newValue) {
			console.log("深度监听: " oldValue, newValue);
		},
		// 进行深度监听加上deep属性为true
		deep: true,
		// 加上immediate属性为true,则侦听的的handler会立即执行一次
		// immediate: true
	}
}

如果watch中监听的数据为多层嵌套的引用结构，可以使用deep进行监听，当数据发生改变时，可以监听到改变。

3.computed和wacth的使用区别

1.computed能完成的功能，watch都可以完成。

2.watch可以完成的功能，computed不一定可以完成，watch可以进行异步操作。因为computed是借助于返回值。而watch是可以直接得到值。

在vue里面写函数的一些原则，所被vue管理的函数，最好写成普通函数，这样this此时vm 或者组件实例

所有不被vue所管理的函数（定时器的回调，ajax的回调函数，promise的回调函数）最好写成箭头函数。这样的this指向才是vm 或组件实例对象。

猜你喜欢