vue watch the monitor data changes

Do the project today, when the sub-assembly data (originally fixed data) parent component needs dynamic pass, if you start initialization data used, but had not yet acquired, initialization is complete it will not update the data. Only monitor these two properties, and then re-execute the initialization.

1, watch an object, the object will have keys with values,

　　The key is that we want to monitor data,

　　Value may be a function of: when we monitor the data changes, the need to perform a function, the function has two parameters, the first one is the current value, the second value is changed;

　　Value may be a function name of the method is: function name to use quotation marks to wrap

　　Value can also be the option to include objects old powerful, powerful old

　　　　It contains three options:

　　　　A, the first value handle: its value is a callback function, the function is to monitor the dialogue when the object to be executed

　　　　B, the second value deep: true or the value false, if the depth of the monitor (monitor is generally not the monitored object property value change, except for the array)

　　　　C, the third value immediate: the value of true or false, whether the current value of the initial execution handle function (when the value of the first binding, does not monitor the implementation of the function will be performed only happen if we change the value. need to be performed at the time of the initial value of the binding function, you need to use the immediate property.).

(1) listening watch data by changing the data, when the data changes, it will print the current value of

watch: {
  data(val, newval) {
    console.log(val)
    console.log(newval)
  }
 }

(2) monitor the change data by docData watch, when the data changes, this.change_number ++ (using depth monitor)

watch: {
  docData: {
   handler(newVal) {
    this.change_number++
   },
   deep: true,
　　immediate: false,

  }
}

(3) change data by listening watch data, when the data changes, the method performed changeData

Watch: { 
  Data: 'changeData' // value of the methods may be a method name 
}, 
methods: { 
   changeData (CURVAL, oldVal) { 
  　　　 conosle.log (CURVAL, oldVal) 
　　} 
}