vue3中watch的deep

时间: 2023-10-27 13:06:55 浏览: 221

vue中watch和computed为什么能监听到数据的改变以及不同之处

在Vue.js框架中，watch和computed是用来监听数据变化的两种不同的属性。它们可以侦测到数据的变化，并且做出相应的响应。在介绍它们为什么能监听到数据变化之前，我们先了解一下Vue的核心特性之一——数据响应式原理。 Vue通过Object.defineProperty()方法将数据定义为响应式，这意味着当数据的属性被访问时，Vue可以拦截这个访问动作，并且在属性被修改时可以捕获到这个变化。每一个Vue实例都会有一个Dep（依赖收集器）实例与之对应，用来管理依赖，即监听数据变化的watcher实例。接下来我们具体来看看watch和computed这两个属性是如何实现对数据变化的监听的。 ### computed的实现原理： computed属性是基于它们的依赖进行缓存的，只有当依赖发生变化时它们才会重新求值。这意味着只要依赖没有变化，多次访问computed属性会返回之前缓存的计算结果，而不会执行定义时的函数。这种特性使得computed特别适用于那些依赖其他数据且计算代价较大的场景。在Vue实例中初始化computed属性时，会使用initComputed方法，它会为每个computed属性创建一个watcher实例，并将其加入到Vue实例的Watcher列表中。这个watcher会有一个特殊的计算函数（getter）用于计算属性值，并将当前Vue实例标记为它的依赖。当计算属性的依赖发生变化时，相应的watcher会重新运行计算函数并更新计算属性的值。 ### watch的实现原理： watch属性则是用来观察和响应Vue实例上的数据变动的。可以传递一个函数或者对象来定义监听器。当被观察的数据变化时，会执行对应的watch回调函数。在初始化阶段，Vue使用initWatch方法来初始化watch监听器。在watcher实例创建时，会有一个调度器（scheduler），它负责将watch回调推入到事件循环中。当观察的数据发生变化时，watcher会把回调放入到微任务队列中，在当前执行栈执行完毕后，下一个tick执行watch回调，确保数据的改变已经被确认。watch支持同步与异步的监听，这取决于回调函数的实现。 ### 为什么能监听到数据的改变： Vue通过在初始化阶段创建Watcher实例，并且利用Object.defineProperty()为数据对象定义getter和setter。当数据被读取时（getter被触发），相关依赖就会被收集到Dep实例中，当数据被修改时（setter被触发），Dep实例会通知所有依赖的Watcher实例，并执行它们的update方法。这就是Vue能够侦测到数据改变并做出响应的原理。 ### watch和computed的不同之处： 1. 用法上的区别： - computed更倾向于处理计算和逻辑依赖，一般用于处理复杂计算，它会根据依赖自动进行缓存，只有依赖的数据发生变化时才会重新计算。 - watch则更适用于执行异步或开销较大的操作，以及监听和响应props或者data属性的变化。 2. 依赖处理上的不同： - computed的依赖是自动追踪的，只有依赖的数据变化时，computed定义的函数才会被调用。 - watch则可以提供一个函数或者对象，可以监控的数据来源更广，包括：字符串形式的Vue实例的属性名、函数形式的监听器、对象形式的监听器等。 3. 性能和效率上的区别： - computed通过缓存机制优化了性能，只有当依赖项发生变化时才会重新计算。 - watch虽然可以进行异步操作，但在数据频繁变更的场景下，可能会造成性能问题。 4. 使用场景上的区别： - computed更适合处理那些依赖其他数据的计算属性，如：根据商品价格和数量计算总价。 - watch更适合监听属性变化，比如：监听路由变化后执行异步请求，或者监听某些状态变化后执行复杂的逻辑。通过上面的介绍，我们可以理解为什么Vue中的watch和computed能监听到数据的改变，并且了解了它们之间的不同之处。在实际开发中，选择合适的监听方式可以有效提升应用的性能和响应速度。

在Vue3中，watch的deep选项用于深度监听一个复杂的对象。与Vue2一样，可以使用deep:true来开启深度监听。当开启深度监听后，如果对象内部的属性发生变化，watch会自动监听到并执行相应的操作。需要注意的是，Vue3中的watch默认不开启深度监听，需要手动设置deep:true来开启。

阅读全文

vue3中watch的deep

相关推荐

Vue侦听器Watch的实战案例解析

Vue2与Vue3 watch侦听器深度解析

vue3的watch中deep

vue3watch deep

vue3 watch deep

vue watch deep

vue3中watch

vue3中watch监听

vue3中watch的使用

vue3中watch的用法

vue3中watch有哪些不足

vue3中watch 监听字符串

vue3中watch的详细用法

vue3中watch开启深度监视

vue3中watch的应用场景

vue3中watch()的用法

vue2vue3的watch

在vue3中watch和watchinfect的区别

Vue3新特性解析：watch、ref与组件交互

最新推荐

给你一个jingqsdfgnvsdljk

MPSK调制解调MATLAB仿真源代码

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

"互动学习：行动中的多样性与论文攻读经历"

【损失函数与批量梯度下降】：分析批量大小对损失函数影响，优化模型学习路径

在设计高性能模拟电路时，如何根据应用需求选择合适的运算放大器，并评估供电对电路性能的影响？