The difference between calculated properties (computed) and listeners (watch)

computed property

1. To use the object as a variable attribute, the result must be returned through return

2. Support caching, cache data once when the page is initialized, use this property in multiple places and only call it once, and only call it again when it affects the sending change of this property

3. An attribute is calculated from multiple attributes, which is a many-to-one or one-to-one relationship

4. Default in-depth monitoring, the default use of the get method is read-only, and the set method can modify data

5. Does not support asynchronous execution (timer)

listener

1. By default, it will not be automatically called during initialization, no deep monitoring, no caching, and it will be called once when the monitored property changes

2. You can monitor multiple properties wrapped in an array or monitor the entire object (deep monitoring)

3. Support asynchronous (timer uses arrow function to ensure the point of this)

4. Listening to an attribute can operate the one-to-many relationship of multiple attributes, and operate the old and new data

5. If you want to execute once at initialization, use the deep:true attribute

6. If you want to monitor in depth, use immediate:true to monitor multi-layer data (the entire object)

watch:{
    //简写
    "sun"(newValue,odlValue){}
    //对象
    "sun":{
        immediate:true,//初始化立即执行一次
        deep:true,//深度监听，监听整个对象
        handler(newValue,oldValue){}
    }
}