前端开发记录，vue watch的新认识

2 02 2 年，我参与了一个使用Vue.js进行前端开发的项目。
那时，我真的对手表功能又爱又恨。
我当时很困惑。
当我看着手表的触发条件时，我的心狂跳起来。
当数据发生变化时它会触发，这不是问题。
但问题是它也会触发无意义的更新。
当时我就想如果数据没有改变的话回调就不会出去。
因此，数据一更新，无论数据移动与否，回调都会随之而来，这让我损失了很大的性能。

后来涉足深度监控。
这玩意对对象或者数组的监控是肤浅的。
要监控内部变化，必须设置 deep: true。
我当时就很困惑，心想：这么全面的监控会不会有性能问题呢？事实上，一旦监测到大物体，速度就会下降，所以我必须小心。

后来我发现了一个好东西，立刻触发了。
立即：是的。
一旦启用这个东西，回调就可以在初始化期间执行。
在某些情况下，这确实是一个救星。
例如，如果我需要在加载组件时执行某些逻辑，这个功能就派上用场了。

我还发现，要监控多个数据源，可以使用计算属性作为中介，或者直接监控多个属性。
Vue3 推荐后者。
这让我在处理复杂逻辑时有更多选择。

在性能调优方面，我学会了避免不必要的监控，只监控需要改变的数据。
Vue3 有一个 watchEffect 可以自动跟踪依赖关系。
当依赖发生变化时，会重新执行，简单方便。

表单验证、API调用和监控在这些场景中发挥着重要作用。
但我也注意到改变时钟中的监控数据会导致无限循环，所以我必须小心。

Vue3 的改变为我开辟了更多的玩法，例如B.监控多个数据源，配置更灵活。

总的来说，手表要仔细研究，合理使用，避免出现性能问题。
全面监控、即时触发、性能优化是我在使用Watch时得到的体会。
希望我的帖子能够帮助到大家。

vue2怎么监听数组的长度

哦，这两种方法各有其好处。
选择哪一种取决于您项目的实际情况。

上周，有客户问我如何在Vue2 中监控数组长度变化。
我向他详细介绍了这两种方法。
首先说第一个，它使用Vuex，适合大型项目。
您需要创建一个 Vuex 存储并在存储中定义数组状态。
这样你就可以使用 Vue 的反应式系统来跟踪数组中的变化。
这个技巧的关键是通过突变来改变数组，以便 Vue 知道它已经改变了。

例如，我在 2 02 3 年 4 月参与的一个项目使用 Vuex 来管理大量产品列表。
该组件使用mapState来映射数组并观察其长度变化。
这个技巧的优点是你可以捕获数组中的元素，即使它们发生了变化。

现在还有第二种方法。
这是直接在组件的手表上监听。
这适合小型项目，简单易行。
只需在组件的数据中声明一个数组并通过 watch 观察其变化即可。
这个方法我亲身经历过。
它简单、快速，适合快速开发的小型项目。

但是，这两种方法都有缺陷。
这意味着您不能直接修改数组或通过索引更改数组的长度。
否则，Vue 将不会知道这一点。
必须使用Vue提供的修改方法（push、pop、splice等）或者直接替换整个数组。

我以前就掉进过这个陷阱。
当时项目中没有检测到数组长度的变化，调试需要时间。
所以提醒大家，修改数组需要使用变异方法。

此外，对于大型阵列，如果不需要详细监控，将 deep 设置为 false 可以提高性能。
性能优化是每个开发者都应该关注的。

最后，这里有一些简单的示例代码，使其更加直观。

JavaScript 默认导出{ 数据（）{ 返回值{ myArray: [1 , 2 , 3 ] }; }, 计算结果：{ 数组长度() { 返回 this.myArray.length。
} }, 查看：{ arrayLength(newLen, oldLen) { console.log(长度从${oldLen}到${newLen}变化); // 执行响应操作 } }, 方法：{ 添加项目（）{ this.myArray.push(Date.now()); // 使用变异方法来保证响应能力 } } };
无论如何，这取决于你。
两种方法各有优点，应根据实际情况进行选择。

defineProperty 真的不能监测数组变化吗？

DefineProperty 无法监视数组更改。

无法监视数组长度的更改。

无法监控新索引。

性能不佳。

Vue 重写数组方法。

Vue 观察数组元素。

直接修改索引或长度无法监控。

无法监视替换数组引用。

不要使用defineProperty来监视元素更改。

性能和设计问题。

结论：defineProperty不适合数组监控。