computed
-
Computed exists as a computational attribute in Vue. What is a computational attribute? It just computes a value.
-
If we have an attribute of A in our data, we execute the display function in computed when a changes. For computed, the code is as follows:
var vm = new Vue({ data: { a: 1 }, computed: { display: function () { console.log(‘11111111111111111’) return this.a * 2 }, }}).$mount(“#app”); console.log(vm.display)vm.a = 3console.log(vm.display)console.log(vm.display)vm.a = 2console.log(vm.display)// 1111111111111 // 2 // 11111111111111111 // 6 // 1111111111111 // 4
If a doesn’t change, then display doesn’t work.
watch
-
Watch exists as a listener in Vue. What is a listener? It’s just listening for a value.
-
If there is an A :1 in our data, watch monitors this A with the following code:
var vm = new Vue({ data: { a: 1 }, watch: { a: function () { console.log(‘11111111111111111’) return this.a * 2 }, }}).$mount(“#app”); console.log(vm.a)vm.a = 3console.log(vm.a)console.log(vm.a)vm.a = 2console.log(vm.a)// 1 // 3 // 3 // 2 // 11111111111111111
Watch is not cached, watch is asynchronous.
Conclusion:
- Computed is a computed property, and it’s cached.
- Watch is a listener. It has no cache and is asynchronous.