What are the differences between vue computed properties and watches?-Vue.js-php.cn

Difference: 1. The calculated attribute needs to be rendered in the template when called, and the metadata on which the calculation depends is modified; watch only needs to modify the metadata when called. 2. Computed attributes default to deep dependence, and watches default to shallow observation. 3. Computed attributes are suitable for filtering and cannot be asynchronous; watch is suitable for asynchronous or expensive operations.

What are the differences between vue computed properties and watches?

computed

##computed is a computed property, it will be calculated based on the data you rely on Dynamically display new calculation results

The calculated properties will be added to the Vue instance. The this context of all getters and setters

is automatically bound to the Vue instance

through the calculated properties

No need to callCan be used directly in the DOM

Basic example

var vm = new Vue({ el: '#app', data: { message: 'hello' }, template: `  我是原始值: "{{ message }}"
 我是计算属性的值: "{{ computedMessage}}"
 // computed 在 DOM 里直接使用不需要调用 
 `, computed: { // 计算属性的 getter computedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })

Copy after login

Result:

I am the original value: "Hello"

I am the value of the calculated attribute: "olleH"

If you do not use calculated attributes, then message.split('').reverse().join('') will be written directly into the template. Then putting too much declarative logic in the template will make the template itself Too heavy, especially when a large number of complex logical expressions are used to process data in the page,

will have a great impact on the maintainability of the page

And if the calculated attribute If the dependency remains unchanged, it will become a cache, and the computed value will not be recalculated

So, if the data needs to be obtained through complex logic, then it is recommended to use calculated properties

watch

An object, the key is the data corresponding to data, and the value is the corresponding callback function. The value can also be a method name, or an object containing options. When the data data changes, a callback will occur. It has two parameters, a val (modified data data) and an oldVal (original data data). )

The Vue instance will call
$watch() when instantiated, traversing each property of the watch object

Basic example

new Vue({ data: { n: 0, obj: { a: "a" } }, template: `     
 `, watch: { n() { console.log("n 变了"); }, obj:{ handler: function (val, oldVal) { console.log("obj 变了") }, deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深 }, "obj.a":{ handler: function (val, oldVal) { console.log("obj.a 变了") }, immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用 } } }).$mount("#app");

Copy after login

Note:

You should not use the arrow function to define the watcher function, because the arrow function does not have this, and its this will inherit its parent function, but its parent function is window, causing the arrow function to this points to the window, not the Vue instance

deep controls whether to see the property changes in this object
immediate controls whether it is the first time Rendering is to execute this function

vm.$watch()The usage is similar to the watch callback

vm.$watch("n", function(val, newVal){ console.log("n 变了"); },{deep: true, immediate: true})

Copy after login

The difference between vue calculated properties and watch

Computed properties vs property detection First run Not run for the first time Needs to be rendered in the template when called , modify the metadata that the calculation relies on Only need to modify the metadata when calling Default deep dependency Default shallow observation Suitable for filtering, not asynchronous Suitable for asynchronous or expensive operations


Computed properties (computed)	Property detection ( watch)

If a piece of data needs to go through complex For calculations, use computed

If a data needs to be monitored and some operations are performed on the data, use watch

Related recommendations:

##2020 Summary of front-end vue interview questions (with answers)
vue tutorial recommendation: the latest 5 vue.js video tutorial selections in 2020
For more programming-related knowledge, please visit:

Programming Teaching

! !

The above is the detailed content of What are the differences between vue computed properties and watches?. For more information, please follow other related articles on the PHP Chinese website!