vue- $ watch Properties Methods

characteristic

https://www.cnblogs.com/widgetbox/p/8954162.html
https://segmentfault.com/a/1190000012948175?utm_source=tag-newest

1, computed properties

• A plurality of data by the data impact

1. It is calculated

2. Application: tempalte which is to simplify the calculation and {} $ EMIT process props or pass value

3. Has a cache of the page does not change the value of re-rendering, compute property returns before the results immediately, without having to perform high performance function again //

• Question (assignment)

$set(arr,1,true) 

2, watch characteristics

• A data affect multiple (large overhead)

1. It is to observe the action
2. Application: monitor value performs the asynchronous operation props, $ emit or assembly of the present
3. No cache of the page re-rendering time when the change will not be executed

3, the difference

1. watch can monitor object properties
2. computed value set can not change the assignment itself, it can only be changed by changing itself other
3. When reading the computed renderbuffer occurs, re-invoked rendering methods, direct monitoring of a change of value Watch, not like the computed detection relies wherein

Examples

watch: {
    first.second(){}, //单个属性 || watch如果想要监听对象的单个属性的变化,必须用computed作为中间件转化,因为computed可以取到对应的属性值
    imgSrc: {
        handler: function(newVal, oldVal) {
        },
        deep: true,  //深度监听 || 发现对象内部值的变化
        immediate: true, //当值第一次绑定的时候，触发执行监听函数
    }
}       

computed: { //只有固定的函数，不能重新赋值 get
    fullName: {
        get(){
            return (this.row) ? this.row.type : '';
        },
        set(value){
            this.firstName = value[0];
            this.lastName = value[1];
        }
    }
},

Points

• When property listener object must define priorities

  When the object parameter assignment, when the property changes, the property must be defined in order to monitor

• Value to be changed to make use of the time involved in changing propscomputed

Computed workflow

• https://segmentfault.com/a/1190000010408657 - depth understanding Vue Computed Computed Property

1. data attribute initialization getter setter
2. computed attribute calculation initialization function will be used to provide the properties of the getter vm.reversedMessage
3. When you first get the value reversedMessage calculated property, Dep began to rely collection
4. When performing message getter method, if Dep rely collected in state, it is determined that the message is reversedMessage dependence, and establish dependencies
5. When the message is changed, according to dependencies, triggering reverseMessage recalculation