vue-computed sum watch

1.computed

computed computed properties:

1. The computed computed property is a watcher with caching capability, and the view will be updated only when the dependent property changes. When there is an attribute requirement calculation in the page, the computed attribute can be used instead. The attribute to be used does not exist, it is calculated from the existing attribute.

  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. The principle is to use the getter and setter provided by the Object.defineproperty method

3. When will the get function be executed?

        Executed once when read for the first time

        It will be called again when the dependent data changes

However, since it is generally only the get value of the calculated property, it can be abbreviated

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

2. watch listener

1. watch belongs to a listener, and the implementation principle of the computed attribute is the same as that of the watcher, but the watch does not have a cache

2. Watch generally monitors a single variable or an array. For monitoring basic data types or performing shallow monitoring, the watch listener can get an oldValue and newValue, but deep monitoring cannot get the oldValue value

3.watch for in-depth monitoring deep

Listen to a single property, because it is the property name in the object

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

Use watch for in-depth monitoring

When using deep:true for in-depth monitoring, the properties of the monitored application type will be traversed layer by layer, and monitoring events will be added, which will lead to relatively high performance overhead, so you can monitor a single property in the reference data type

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
	}
}

If the data monitored in watch is a multi-layer nested reference structure, you can use deep to monitor, and when the data changes, you can monitor the changes.

3. The difference between computed and wacth

        1. The functions that can be completed by computed can be completed by watch.

        2. The functions that can be completed by watch may not be completed by computed, and watch can perform asynchronous operations. Because computed is by means of the return value. And watch can get the value directly.

Some principles of writing functions in vue, the functions managed by vue are best written as ordinary functions, so that this is vm or component instance at this time

All functions not managed by vue (timer callback, ajax callback function, promise callback function) are best written as arrow functions. Such this point is the vm or component instance object.