1.Differences and features between COM Puted and Watch
-
Computed is a calculated attribute, and watch is a listener
-
Computed is used to compute a value, with caching (dependency invariant, values not recalculated) without parentheses
-
“Watch” has two options, “deep:true” and “deep:true”. “watch” has two options, “deep:true” and “deep:true”
2.computed
For example, to display gender according to need, click the button male to display all males, click the button female to display all females, click all to display all. The difference between using computed data and not using computed data is as follows:
Do not use the computed
Vue import Vue from "Vue /dist/vue.js"; Vue.config.productionTip = false; let id = 0; const createUser = (name, gender) => { id += 1; return { id: id, name: name, gender: gender }; }; new Vue({ data() { return { users: [createUser (" zhang fei ", "male"), createUser (" the sable cicada ", "female"), createUser (" lyu3 bu4 ", "male"), createUser (" Joe ", "female")], displayUsers: []}; }, created() { this.displayUsers = this.users; }, methods: {showMale() {this.displayUsers = this.users.filter(u => u.gender === "male "); }, showFemale() {this.displayUsers = this.users.filter(u => u.gender === "female "); }, showAll() { this.displayUsers = this.users; } }, template: <div> <div> < button@click ="showAll"> all </ button@click ="showMale"> male </ button@click ="showMale"> male </ button@click ="showAll" Female @ click = "showFemale" > < / button > < / div > < ul > < li v - for = "(u, index) in displayUsers" : the key = "index" > {{u.n ame}} - {{u.gender}}</li> </ul> </div> ` }).$mount("#app");Copy the codeThe use of computed
import Vue from "vue/dist/vue.js"; // For computed attributes, vue.config. productionTip = false; let id = 0; const createUser = (name, gender) => { id += 1; return { id: id, name: name, gender: gender }; }; new Vue({ data() { return { users: [createUser (" zhang fei ", "male"), createUser (" the sable cicada ", "female"), createUser (" lyu3 bu4 ", "male"), createUser (" Joe ", "female")], gender: ""}; }, computed: {displayUsers() {const hash = {male: "male ", female:" female "}; const { users, gender } = this; if (gender === "") { return users; } else if (typeof gender === "string") { return users.filter((u) => u.gender === hash[gender]); } else {throw new Error(" Gender is an unexpected value "); } } }, methods: { setGender(string) { this.gender = string; } }, template: '<div> <div> < button@click ="setGender(')"> All </ button@click ="setGender('male')"> male </ button@click ="setGender('male')" @click="setGender('famale')"> female </button> </div> <ul> <li v-for="(u,index) in displayUsers" :key="index">{{u.name}}---{{u.gender}}</li> </ul> </div> ` }).$mount("#app");Copy the code3.watch
1. Use
When data changes, a function is executedCopy the codeExample: Implement an undo function as follows:
1. Initial state:Copy the code
2. After clicking +1 button:Copy the code
3. Click Undo and go back to the previous step:Copy the code
The code looks like this:
import Vue from "vue/dist/vue.js"; // For computed attributes, vue.config. productionTip = false; new Vue({ data: { n: 0, history: [], inUndoMode: false }, watch: { n(newValue, oldValue) { if (! this.inUndoMode) { this.history.push({ from: oldValue, to: newValue }); } } }, template: ` <div> {{n}} <hr/> <button @click="add1">+1</button> <button @click="add2">+2</button> <button @ click = "minus1" > 1 < / button > < button @ click = "minus2" > 2 < / button > < hr / > < button @ click = "undo" > cancel < / button > < hr / > {{history}} </div> `, methods: { add1() { this.n += 1; }, add2() { this.n += 2; }, minus1() { this.n -= 1; }, minus2() { this.n -= 2; }, undo() { const last = this.history.pop(); this.inUndoMode = true; const old = last.from; this.n = old; this.$nextTick(() => { this.inUndoMode = false; }); } } }).$mount("#app"); \Copy the code2. Watch’s deep option
Deep :true not only looks at the value, but also looks at whether the address has changed
(PS: simple types look at values, complex types compare addresses)