vue中computed顺序、watch顺序、响应次数使用
作者:秦时明月之安康
这篇文章主要介绍了vue中computed顺序、watch顺序、响应次数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
先看代码
<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>
输出结果
页面渲染完成的输出
点击按钮的输出
跟你的预期一致么?如果不一致,为什么?
分析过程
- 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
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。