Vue.js 使用 set 来防止重复

在 Vue.js 中，我们经常需要防止数据重复、不可变，实现这个过程有一个很好用的函数：set。

set 的作用

set 方法可以用来响应式地添加一个新的属性，同时 Vue 也会监听这个属性的变化，如果这个属性已存在，则会更新这个属性的值。如果构成对象的属性不存在，则会在对象上添加这个属性。

如何使用 set

在 Vue 组件中使用set：

this.$set(this.data, 'key', 'value')

其中，data 表示数据对象，key 表示添加的属性名称，value表示要添加/更新的属性值。这个方法可以模拟 Vue.set 方法。

在全局 Vue 实例（也就是根实例）上使用 set：

Vue.set(this.data, 'key', 'value')

set 的好处

在 Vue.js 中，我们经常使用数据作为视图的渲染基础，同时也需要根据业务逻辑来修改这些数据。如果采用传统的方式来修改数据，可能会遇到一些问题：

• Vue 不会追踪直接赋值的属性，所以不会触发视图更新；
• Vue 无法检测到数组下标的变化；
• Vue 无法检测到对象属性的添加或删除，所以赋值、添加与删除属性时需要采用 Vue 提供的对应 API。

而使用set来修改数据可以解决这些问题，确保数据的响应式更新。

最佳实践

• 在一般情况下，使用set 来添加、更新或删除对象的属性。这样可以确保对象响应式更新，并且不会出现网络循环。
• 在更新已知数量的数组时，使用 splice() 或 Vue 提供的修改数组的 API，比如 push(), pop(), shift(), unshift(), sort() 和 reverse() 等，这些方法会自动触发视图更新。
• 在更新数组长度时，使用 length 属性会导致它被修改后数组依然不可响应；因此，要用 splice 来更新数组长度。

使用 set 来修改数据既方便又可靠，是 Vue.js 组件化开发中的最佳实践。希望本文能对您了解 Vue.js 中的 set 方法有所帮助！