Vue怎么赋值才能避免触发watch事件

在 Vue 中，如果你对一个 data 属性进行赋值，Vue 会自动检测到这个变化并触发对应的 watch 响应函数。如果你不希望触发 watch 事件，可以使用 $set 或者直接修改对象属性的方式来实现。

1. 使用 $set 方法：

this.$set(this.obj, 'key', value);

2. 直接修改对象属性：

this.obj.key = value;

这两种方式都不会触发 watch 事件，因为它们都是直接修改了对象的属性值，而不是对整个对象进行重新赋值。但是需要注意的是，如果你在使用第二种方式时，给对象添加新的属性，是会触发 watch 的。

相关问题

Vue怎么赋值才能不触发watch事件，避免循环嵌套

在 Vue 中，如果我们想要赋值但不触发 watch 事件，可以使用 $set 方法或者 Object.assign 方法。具体的实现方法如下：

1. 使用 $set 方法：

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

2. 使用 Object.assign 方法：

this.data = Object.assign({}, this.data, { key: value });

需要注意的是，使用 Object.assign 方法只会触发一次 watch 事件，而使用 $set 方法则不会触发 watch 事件。因此，如果你希望在赋值时避免循环嵌套，建议使用 $set 方法。

Vue怎么赋值才能不触发watch事件，避免循环嵌套触发事件，被赋值的元素是根元素

在 Vue 中，如果要避免在给一个被 watch 监听的属性赋值时触发 watch 事件，可以使用 Vue 的 `$set` 方法来进行赋值。具体做法是：先将根元素设置为一个空对象，然后再使用 `$set` 方法来给根元素设置属性。这样做的好处是，能够避免循环嵌套触发事件。

例如，如果要给一个名为 `root` 的根元素赋值，可以使用以下方法：

<template>
  <div>
    <!-- 使用 $set 方法给根元素设置属性 -->
    <div v-for="item in root.items" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      root: {}
    }
  },
  mounted() {
    // 使用 $set 方法给根元素设置属性
    this.$set(this.root, 'items', [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Cherry' }
    ])
  }
}
</script>

这样做就能够避免循环嵌套触发事件了。