Computed properties

  • Used to calculate
import Vue from "vue/dist/vue.js"; Vue.config.productionTip = false; New Vue({data: {user: {email: "[email protected]", nickname: "square ", phone: "1111111"}}, computed: { displayName: { get() { const user = this.user; return user.nickname || user.email || user.phone; }, set(value) { console.log(value); this.user.nickname = value; } } }, template: ` <div> {{displayName}} <div> {{displayName}} <button @click="add">set</button> </div> </div> `, methods: { add() { console.log("add"); This. displayName = "yuanyuan "; } } }).$mount("#app");Copy the code

Watch listen

  • Used to execute a function when data changes

Code Example 1:Codesandbox. IO/s/goofy – cur…

  • Handler (){},deep=turn handler(){},deep=turn

  • Do not enclose the arrow function in watch, because the arrow function this points to the global object

  • Immediate: true Indicates whether to run the function for the first time