文章目录
前言
深究vue中computed顺序、watch顺序、响应次数深究步骤
1.代码
<template>
<div class="hello">
<button style="font-size: 40px;" @click="change">改变值</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
console.log("data");
return {
a: 1,
a2: 1
};
},
watch: {
a() {
console.log("watch a");
},
b() {
console.log("watch b");
},
c() {
console.log("watch c");
},
a2() {
console.log("watch a2");
}
},
computed: {
b() {
console.log("computed b");
return this.a + 1;
},
c() {
console.log("computed c");
return this.b + this.a;
},
d() {
console.log("computed d");
return this.a + 1;
}
},
methods: {
change() {
console.log("-");
this.a2 += 1;
console.log("--");
this.a += 1;
console.log(this.c);
console.log("---");
}
}
};
</script>
<style scoped lang="less"></style>
2.输出结果
页面渲染完成的输出：
点击按钮的输出：
跟你的预期一致么？如果不一致，为什么？
3.分析过程
-
vue是如何知道computed内的响应式变量发生了变化？答：第一次调用时收集依赖
-
a 是 data，b watch 了 a，c watch 了 a 和 b，问 a 变化时，c 执行多少次？答：1次
-
同一个函数内修改了 data 的两个值，watch 中的调用顺序是否与修改 data 的值的顺序有关？答：无关，只与 watch 的定义顺序有关
-
一个函数 f1 内修改 data 变量 a，执行完该函数前，watch a 的函数是否会在 f1 执行完毕之前执行？答：不会，会先缓存待执行的 watch 函数，之后再统一调用这些 watch 方法
-
初始化加载页面时，computed 是否会执行？答：不会，调用时才会执行（观察 computed 的 d 从未执行过。而打印computed b，是因为 watch 了 b）。
-
变量发生变化时，watch 先执行？还是 computed 先执行？答：computed（有的话）
-
computed 的打印顺序是否与定义顺序有关？答：无关，只与变化顺序有关
-
若在 chrome DevTools 中 vue 插件查看此组件的数据，则会执行一次 computed d
-
何时会执行 computed ？答：被调用时。分几种情况：被 template 调用时、被实际执行的代码调用时、被 watch 时
-
data 跑完才跑 watch
总结
做学问，一定要勤于思考，透过现象看本质，才能有进步