computed

Application scenarios: Templates involve complex operations:

//template
{{reservemsg}}


computed: {reservemsg: {get:function(){
            return this.message.split(' ').reverse().join(' '); }}}}Copy the code

Reactive When the value of a calculated attribute depends on changes, the calculated attribute is updated, and the value in the template is also changed. The calculated attribute cannot have the same name as the attribute in data

Compute properties depend on caching

  1. The calculated property has a corresponding Watcher
  2. Watcher instances have a dirty control over whether or not they are cached. When watcher. Dirty is true, the get method is called to reevaluate it. When it is false, the watch value is read
  3. When the life cycle is initialized, the value is undefined, and computed gets the real value through GET only when the template mounts data and saves it in watch.value

watch

Application scenario: When the data changes greatly and asynchronous operations or expensive operations are performed, the execution of the listening function will not be triggered when the internal attributes of the object change. To enable deep listening, you need to add a deep:true handler: Listener function deep:true Changes in internal attributes of the listener object immediate:true Controls the listener function to be executed immediately



  watch: {
	person: {handler:function(newval,oldval){
    			console.log(newval+'-- -- -- -- --+oldval)
    		},
    		// Deep monitor
    		deep:true.// Execute immediately
    		immediate:true}},Copy the code

Address: juejin.cn/post/691780…