前言

深究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

总结

做学问，一定要勤于思考，透过现象看本质，才能有进步

深究vue中computed顺序、watch顺序、响应次数相关推荐

VUE中computed 、created 、mounted 的先后顺序
VUE中computed .created .mounted 的先后顺序 1.computed .created .mounted 的先后顺序 created => computed => ...
vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
Vue中computed分析
Vue中computed分析在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
vue中computed的详细讲解
vue中computed的详细讲解 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相 ...
vue中数组的七个响应式方法
vue中数组的七个响应式方法起因: 在使用vue实习中,通过数组的索引改变了数组中的值,测试时发现,更改成功了,但是试图无响应. 原因: *通过索引值修改数组元素,不是响应式方法* // 以下代 ...
Vue 中 computed vs methods的区别
computed:计算属性 methods:方法 watch:侦听器 computed与methodes区别 1.computed是响应式的,methods并非响应式. 2.调用方式不一样,compu ...
Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
vue中computed和watched的区别
computed computed在vue中起到计算属性作用. <p>firstName: <input type="text" v-model="fi ...

深究vue中computed顺序、watch顺序、响应次数

文章目录

前言

深究步骤

1.代码

2.输出结果

3.分析过程

总结

深究vue中computed顺序、watch顺序、响应次数相关推荐

最新文章

热门文章