VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析

问题描述：

在使用Vue开发时，我们会用到数据双向绑定，当数据变更时，视图会自动更新，但是有时候我们会遇到这样的情况：通过JS代码直接修改DOM元素的值，但是发现数据没有更新。这是为什么呢？

原因分析：

在Vue中，双向数据绑定是通过Vue的响应式系统实现的。当数据发生变化时，Vue会自动触发数据的setter方法，从而更新绑定到该数据的DOM元素。而当我们通过JS代码直接修改DOM元素的值时，并没有触发到数据的setter方法，导致数据没有更新。

解决方案：

1.使用Vue提供的API修改数据

如果想要实现数据修改后自动更新视图，可以使用Vue提供的API来修改数据。这样可以确保数据的修改能够被Vue监听到，从而自动更新视图。

以Vue中的计数器为例，我们可以使用Vue提供的API来修改计数器的值：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="addCount">点击累加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addCount() {
      this.count++;
    },
  },
};
</script>

在上面的例子中，我们通过点击按钮来实现计数器的累加。需要注意的是，在这里我们使用了Vue提供的语法糖“@click”来绑定按钮的点击事件，并在对应的方法中修改了计数器的值。这样，当计数器的值发生变化时，Vue会自动更新视图，保证数据和视图的同步。

2.手动触发数据的setter方法

如果一定要通过JS代码直接修改DOM元素的值，我们也可以手动触发数据的setter方法，从而更新数据。

以Vue中的计数器为例，我们可以通过JS代码获取到计数器的DOM元素，并手动触发数据的setter方法来修改计数器的值：

<template>
  <div>
    <p ref="count">{{ count }}</p>
    <button @click="addCount">点击累加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addCount() {
      const countEl = this.$refs.count;
      const newCount = parseInt(countEl.innerHTML) + 1;
      this.count = newCount;
    },
  },
};
</script>

在上面的例子中，我们通过ref属性获取到计数器的DOM元素，并在对应的方法中手动触发数据的setter方法来修改计数器的值。需要注意的是，这种方法相比于第一种方法来说，写起来比较麻烦，而且还需要手动触发数据的setter方法，所以在实际开发中应该尽量避免使用。