computed

Computed is a property that can be computed. A calculated property can be a function or an object of getters and setters

Benefits: It can be used directly without parentheses, cached by dependency, and computed without recalculation if the dependency does not change

import Vue from "vue/dist/vue.js"; New Vue({data: {name: 'yasso ', age: '18'}, computed: {newName() {return this.name +' + this.age}}, template: ` <div> {{newName}} </div> `, methods: {} }).$mount("#app");Copy the code

NewName is calculated by this.name + this.age. NewName can be directly used as an attribute without parentheses and displayed on the page

You can also change names using get and set

import Vue from "vue/dist/vue.js"; Vue.config.productionTip = false; New Vue({data: {user: {name: "yasso ",}}, computed: {displayName: {get() {const user = this.user; return user.name ; }, set(value) { console.log(value); this.user.name = value; }}, template: '<div> {{displayName}} <div> < button@click ="add"> </button> </div> </div>', methods: { add() { console.log("add"); This. displayName = "blind "; } } }).$mount("#app");Copy the code

The setter and getter makes the calculation property modifiable. When clicking ‘Change name’, the calculation result changes, reruning the calculation and updating the page. The result of a calculated property is cached, and the calculated property is recalculated only if its associated dependencies change. So I hit ‘Change the name’ again and because it’s the same, it’s not going to run again.

Watch

  • Execute a function when data changes
  • The Watch property can be a string, a function, an object, an array
  • Has both deep and immediate attributes

Deep If you want to listen on an object, you can use deep: true, deep: false immediate to indicate whether to execute this function on the first execution. You can use immediate: true or immediate: false

Import Vue from "Vue /dist/ Vue. Js "; new Vue({ data: { n: 0, obj: { a: "a" } }, template: ` <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a: 'a'} "> object obj = new < / button > < / div > `, watch: {n () {the console. The log (changed" n "); }, obj() {console.log("obj changed "); Obj}, "a" : the function () {the console. The log (" obj. A changed "); } } }).$mount("#app");Copy the code

At this time

  • Click n+1: Print “N has changed”
  • Without clicking obj. A + ‘hi’, click obj = New object: Print “obj has changed “, do not print “obj. A has changed”
  • Click obj. A + ‘hi’ : print “obj. A changed “, do not print “obj changed”

The watch listens for simple data types based on values and complex data types (objects) based on addresses

You can also use deep to listen for changes in obJ

Watch: {n() {console.log("n changed ")}, obj() {console.log("obj changed ") deep: true Function () {console.log("obj.a changed ")}}Copy the code
  • Click obj. A + ‘hi’ : Print “obj. A changed “and “obj changed”
  • When deep: true listens for all internal properties of an obj object, the default is false

The immediate attribute

import Vue from "vue/dist/vue.js"; New Vue({data: {name: '', fullName: ''}, watch: {name: {handler: ''}}, template: ` < div > {{fullName}} < button @ click = "name = 'blind boy" > change name < / button > < / div > `, the methods: { change() { this.fullName = this.name } } }).$mount("#app");Copy the code
  • Display the computed value of name through the fullName attribute
  • Run the above code, the page is empty
  • And then you click “Change your name,” and it says “Blind kid.”
  • But when the page starts, the name value “yasso” is not displayed because Watch does not listen for the first change
Watch: {name: {handler: 'change', immediate: true}}Copy the code

  • Change the initial page to show “Yasso.”

  • If immediate: true, the callback is executed immediately after the listener starts to listen for the first change

Summarize the differences between computed and watch

  • Computed is used to calculate a value; you do not need parentheses and can use it directly as an attribute. Computed has the dependency caching feature, and if the dependency value does not change, computed does not recalculate

  • Watch is used to listen on objects with two options, immediate and deep. If immediate: true, this function is executed on the first run. If deep: true, an object is listened on and its internal properties are listened on. Watch does not rely on caching.

Learning subplan, there are mistakes please correct