I. Computed: Dynamically computed attributes (the difference with ordinary attributes is that the attributes need to be computed when accessed)

Const vm = new Vue({data:{n:1 // data n}, conmputed{setReadN:{
            get(){// read nreturn this.n
            },
            set(value){     //设置n
                this.n=value
            }
        }
    },
    template:`{{setReadN}} '}) vm. SetReadN = 2 vm. SetReadN = 2Copy the code

Note: setReadN depends on data data.n. When data.n is changed. SetReadN in template will be triggered to recalculate the value. Also, setReadN will not be triggered if you assign data.n to the same value as last time. Because of the cache comparison. If the values are the same

Summary: 1. Computed: Attributes of this object have dynamic computation 2. A change in the value on which the property of the object depends triggers a get 3 for the property of the object. The values of the attributes of the object are cachedsetIf the value is the same, get will not be triggeredCopy the code

2. Watch: refers to monitoring. If the data changes, the bound function will be called

const vm = new Vue({
    data:{
        n:0,
        obj:{
            a:'a'
        }
    },
    watch:{
        n:function(newValue, oldValue) {the console. The log (` from me${oldValue}Turned out to be${newValue}`)
        },
        obj:function(){
            console.log('Obj has changed.')},'obj.a':function(){
            console.log('Obj. A has changed'}}}) vm.n = 1 // call watch.n vm.obj = {a:'a'} // Call watch.obj vm.obj.a ='b'/ / call the watch. Obj. ACopy the code

Note:

  1. The common data type in Watch mainly uses === to discover whether the value has changed
  2. The object type depends primarily on whether the referenced address has changed
  3. Object property to listen on as string ‘obj.a’
  4. The reference address of the object is changed. The attributes are not changed. The listener takes effect. And vice versa

Watch has two options: immediate and deep

The monitoring takes effect immediately.

new Vue({
 data:{
     n:0
 },
 watch:{
     n:{
       handler: 'change',
       immediate: true// The property istrueCall change function}} when n is 0 (first render), methods:{change(){
         console.log('Fire this function the first time you render.')}}})Copy the code

Note: the change function is triggered when listening starts with immediate true

2. Deep (observe that the object is listening when its property changes) example:

const vm = new Vue({
 data:{
     obj:{
         a:'a'
     }
 },
 watch:{
     obj:{
       handler: 'change',
       deep:true/ / deep intotrue}}, methods:{change(){
         console.log('Obj's properties have changed')
     }
 }
})
vm.obj.a = 'b'/ / deep intotrueThe change function is called to listen for the object properties to changeCopy the code

Note: Deep false does not listen for properties of this object. True listens for changes and calls change

Summary: 1. Watch mainly listens to data in data 2. Common type checks whether its value changes. 3. If "deep" is not set, if the "deep" property is not changed, then the "deep" property takes effect. Changes in object attributes do not affect listening on the object. 4. Immediate istrue5. Deep fortrueWhen the properties of the object change, the listening of the object takes effectCopy the code