computed、watch、update区别

1、watch

理解: Listener, listen to the change of a certain data to perform some operations, when the data in the data changes, perform some expensive or asynchronous operations

1. Monitor value type (simple type) data

// In a vue instance 
    new Vue ({
        el:"#myApp",
        data:{
            num1:1,
            num2: 2
        },
        methods:{},
        watch:{
            // Here are two properties, the first value is the latest value after the change, the second is 
            num1 (after, before) before the change {
                 this .num2 = after +1
            }
           immediate: true     // Monitor when the page is first loaded. 
         // The meaning here is to monitor the change of num1, and when the data of num1 changes, manipulate the value of num2 
        }
    })

2. Monitor the data of reference (complex) type

　　

new View ({
        el:"#myApp",
        data:{
            obj:{
                userName:"caicai"
            }
        },
        watch:{
            obj:{
                handler(newValue,oldValue){
                    // handler function is what you want to do when your obj changes                   
                  console.log(newValue.userName,oldValue.userName);
                },
                deep: true // Whether to listen deeply, true on, false off, default false
                // After adding deep, it is equivalent to adding a handler listener to the properties of each layer of the object obj. Otherwise, only the reference address is heard, and the handler function will not be executed
            }
        }
    });

　

2. The
calculated understanding: Calculating attributes, as the name implies, is to calculate a certain attribute through a certain attribute (data). This key point is calculation. What we want is to get the data and process it to get the calculation result.
In the original vue template template, the author's original intention was to perform some simple operations, then more complex calculations can be performed using computed

  <div id="myApp">
        <input type="text" v-model="str">
   1. The first operation, written in the template, causes the template to be too heavy and difficult to maintain
        <p>{{str.split("").reverse().join("")}}</p>	
   2. The second method is called by one method. If it is used in multiple places, it is executed multiple times, reducing the running speed and reducing the performance.
        <p>{{fn(str)}}</p>
   3. The third one uses a filter and has a cache. As long as the str does not change, it will not be calculated again.
        <p>{{reverseStr}}</p>
    </div>
<script type="text/javascript">
new View ({
    el:"#myApp",
    data:{
        str:"abcd"
    },
    methods:{
        fn (v) {
        	// If there are more calls, execute multiple times
          return v.split (""). reverse (). join ("") // Explode--reverse--combine
        }
    },
    computed:{
        reverseStr(){
        	// If the str does not change, I only execute it once, with a cache
            return this.str.split("").reverse().join("")
        }
    }
})
</script>

　　

Here I will briefly summarize the difference between the two, and the
calculated scenario :

1. Monitor the variables defined by yourself, no longer need to be declared in the data, the function name is the variable name
2, suitable for multiple variables or objects to return a value (result) after processing. If one of these multiple variables changes, the result will change.
3. The result of the calculation has a cache, which depends on the change of the responsive property. The responsive property does not change, and the result is directly read from the cache.
4. Don't add () when calling internal function.
5. You must use return to return
6. Do not perform assignment operations on the data in data in computed, which will form an infinite loop.

watch：

1. The watch function does not need to be called.
2. The focus is on monitoring. When the monitoring data changes, the callback function operation is executed.
3. When we need to perform asynchronous or expensive operations when the data changes, we should use watch
4. The function name is the name of the data you want to monitor

scenes to be used:

computed:
1. When a required result is affected by multiple data, such as the shopping cart settlement amount (subject to price settlement in many places).
2. Manipulate an attribute, perform some complex logic, and use the result in multiple places.
3. This result is used in many places in the internal function.
watch:
1. Monitor the special processing of some input box values, suitable for one data to affect multiple data.
2. When the data changes, perform some asynchronous operations, or operations with relatively large overhead

3. Updated
understanding: It is a hook function in the vue life cycle-the data update triggers the view update. Here is the operation after the view update can be performed here.

Trigger conditions:
1. When the data defined in data changes, the updated method will be loaded.

2. Any data update, if you want to do unified business logic processing

3. In most cases, avoid changing the state during this period, as this may cause an infinite loop of updates. This hook is not called during server-side rendering.

Features:
1. When it is executed, the data changes and the interface is updated
2. Cannot listen to the routing data (such as the parameters in the URL)
3. All data changes will be called (consumption performance)
4. As long as the data occurs Change, the same code is triggered every time