本篇文章带大家认识Vue中的computed 和 watch，介绍一下computed 和 watch的区别，希望对大家有所帮助。
1、用途：被计算出来的属性就是计算属性
2、计算属性的好处：它可以让一些是根据其他属性计算而来的属性变成一个属性
computed有一个依赖缓存，如果computed的依赖属性没有变化，那么computed就不会重新计算。如果一个数据依赖于其他数据，那么把这个数据设计为 computed。【相关推荐：《vue.js教程》】
示例（用户名展示）：
Vue.config.productionTip = false;
new Vue({
data: {
user: {
email: "jade@qq.com",
nickname: "jade",
phone: "18810661088"
}
},
computed: {
displayName: {
get() {
const user = this.user;
return user.nickname || user.email || user.phone;
},
set(value) {
console.log(value);
this.user.nickname = value;
}
}
},
// DRY don't repeat yourself
// 不如用 computed 来计算 displayName
template: `
<div>
{{displayName}}
<div>
{{displayName}}
<button @click="add">set</button>
</div>
</div>
`,
methods: {
add() {
console.log("add");
this.displayName = "圆圆";
}
}
}).$mount("#app");3、缓存：
如果依赖的属性没有变化，就不会重新计算getter/setter默认不会做缓存，Vue做了特殊处理
如何缓存？可以参考以下示例：
1、用途：当数据变化时，执行一个函数，watch是完美实现历史功能的一个函数（方法）
示例（撤销）：
import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;
new Vue({
data: {
n: 0,
history: [],
inUndoMode: false
},
watch: {
n: function(newValue, oldValue) {
console.log(this.inUndoMode);
if (!this.inUndoMode) {
this.history.push({ from: oldValue, to: newValue });
}
}
},
// 不如用 computed 来计算 displayName
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">撤销</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;
console.log("ha" + this.inUndoMode);
const old = last.from;
this.n = old; // watch n 的函数会异步调用
this.$nextTick(() => {
this.inUndoMode = false;
});
}
}
}).$mount("#app");加了immediate: true ，一次渲染的时候会触发watch
Vue.config.productionTip = false;
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'}">obj = 新对象</button>
</div>
`,
watch: {
n() {
console.log("n 变了");
},
obj:{
handler(){
console.log("obj 变了");
},
deep:true
},
"obj.a": function() {
console.log("obj.a 变了");
}
}
}).$mount("#app");
上面箭头函数的外层的函数是全局作用域，全局作用域的this就是全局对象window/global,所以你无法在这里获取this.n/this.xxx,所以，watch里面是绝对不能使用箭头函数的
vm.$watch('xxx',fn,{deep:...,immediate:...})watch前面加$这样的写法是为了避免和一个叫watch的data名重复
2、deep:true是干什么的？
如果object.a变了，请问object算不算也变了
如果需要答案是【也变了】，就用deep:true如果需要答案是【没有变】，就用deep:false
deep就是往不往里面去看，去深入的看，true就是深入进入看，默认是false(只看表层的地址）。
不光要比较obj的地址，而且要比较里面任何一个数据变了，都要认为是obj变了。
computed:就是计算属性的意思watch:就是监听的意思watch 支持异步代码而computed不行computed这个值在调用的时候，不需要加括号，它会根据依赖自动缓存，就是说如果依赖不变，这个computed的值就不会重新再计算。
watch它有两个选项，第一个是immediate,表示在第一次执行时要渲染这个函数；另一个是deep,意思是如果我们要监听一个对象，是否要看它里面属性的变化。
如果一个数据依赖于其他数据，那么把这个数据设计为computed;
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据的变化。
以上，就是computed和watch的区别。
更多编程相关知识，请访问：编程入门！！
以上是认识Vue中的computed 和 watch，聊聊它们的区别的详细内容。更多信息请关注PHP中文网其他相关文章！
