vue: the difference between the computed and watch

vue: the difference between the computed and watch

Relations watch, computed and methods of

1.watch computed and tracking mechanisms are dependent vue is based, are trying to deal with one thing: When a data (ie, data-dependent) changes, all depend on the 'relevant' data is data 'Auto 'changes, the relevant function is automatically invoked to achieve changes in the data.

2. For methods: function methods in defined, it is clear that the need to manually invoke the function to perform, and not as 'auto-run' pre-defined function like watch and computed.

Data computed and their relationship scenario watch different process:

1.watch processing scenario is: a plurality of data Data Effect

2.computed processing scenario is: a plurality of data by a data Effects

Only consistent with the presence of dependent data-dependent data changes these two conditions, computed will be recalculated;

Code Description:

watch usage:

// In the watch, once haiZeiTuan_Name (name pirates) is changed 
  // Data option all crew will automatically change the name (suoLong, naMei, xiangJiShi), and print them out 
 
// s) name data crew - -> depends on -> (a) a data name data pirates change ---> all of the plurality of data changes 
data: { 
    haiZeiTuan_Name: 'straw hat pirates' , 
    suoLong: 'Solon straw hat pirates' , (haiZeiTuan_Name + pirates name) 
    namei: 'straw hat pirates Nami' , 
    xiangJiShi: 'Xiangjishi straw hat pirates' 
}, 
Watch: { 
    haiZeiTuan_Name: function (newName) {
       the this .suoLong newName + =' cable Long '
       the this .naMei newName + =' Nami '
       the this .xiangJiShi newName + =' Sunkist '
      console.log(the this .suoLong) 
      the console.log ( the this .naMei) 
      the console.log ( the this .xiangJiShi) 
    } 
 } 
// Change option watch monitor main data 
vm.haiZeiTuan_Name = 'rubber pirates' 
results: this.suoLong becomes 'Solon rubber pirates', so

computed usage:

Data: {
     // Luffy full name: Monkey · D · Luffy 
    firstName: 'Monkey' , 
    secName: 'D' , 
    thirdName: 'Luffy' 
  }, 
  computed: { 
    luFei_Name: function () {
       return  the this + .firstName the this .secName + the this .thirdName 
    } 
  } 
// the "Luffy" to "King of the Navy" 
vm.thirdName = 'Navy king'   // Monkey · D · Navy king

Description difference between the two:

new new Vue ({ 
  EL: '#app' ,
   // set two button, click to call, respectively getMethodsDate, getComputedDate Method 
  Template: 
 ' <div ID = "App"> 
    <Button @ = the Click "getMethodsDate"> Methods </ Button> 
    <Button @ = the Click "getComputedDate"> computed </ Button> 
</ div> ' , 
  Methods: { 
    getMethodsDate: function () { 
      Alert ( new new a Date ()) 
    }, 
    // returns the computed attribute calculation options set - computedDate 
    getComputedDate: function () { 
      Alert ( the this .computedDate)
    }
  },
  computed: { 
    computedDate: function () {
       return  new new a Date () 
    } 
  } Note that two clicks are computed to return the same time! ! 



1. Click twice methods return time is different 

2. Note that two clicks time computed return is the same as 

[Note] Why two clicks computed the same time to return it? new Date () is not data-dependent (data not on other data in the object instance), it only provides a computed value of the cache, without recalculation

vue: the difference between the computed and watch

Guess you like