【Vue监听属性详细介绍】

1. 监听属性

在Vue中，监听属性是一个十分重要的特性，它允许你监听和响应数据变化，监听器可以用来执行代码，每当一个特定属性变化时就会触发。

使用场景：我们可以使用监听属性watch来响应数据的变量， 当需要在数据变化时执行异步或开销较大的操作时，这种方式比较有用，回想一下是否做过下拉列表的级联选择？
watch声明语法:

watch: {
    xxxx: function(val) {
        //监听器实现
    }
}

示例： 米和厘米的单位换算
设置监听器：

var vm = new Vue({

    el: '#app',

    data: {
        m: 1,
        cm: 100
    },

    //设置监听属性
    watch: {
        m: function(val) {
            if(val)
                this.cm = parseInt(val) * 100;
            else
                this.cm = "";
        },
        cm: function(val) {
            if(val)
                this.m = parseInt(val) / 100;
            else
                this.m = "";
        }
    }

});

HTML中使用v-model实现与数据的双向绑定

<div>
    <!--注意v-model的双向绑定-->
    米:     <input type="text" v-model="m">
    厘米:  <input type="text" v-model="cm">
</div>

Vue 提供了几种不同的方法来监听数据变化：

2. watch 属性

在 Vue 组件中，你可以使用 watch 选项来观察和响应 Vue 实例上数据的变化，当你需要在数据变化时执行异步或者开销较大的操作时，这是最有用的。

new Vue({
  data() {
    return {
      someData: ''
    }
  },
  watch: {
    // 如果 `someData` 发生改变，这个函数就会运行
    someData(newValue, oldValue) {
      // 做一些事情
    }
  }
});

3. 计算属性（Computed Properties）

计算属性本质上是基于他们的依赖进行缓存的 watcher，只有在相关依赖发生变化时才会重新求值。

new Vue({
  data() {
    return {
      someOtherData: ''
    }
  },
  computed: {
    // 计算属性的 getter
    someComputedProp() {
      // `this.someOtherData` 是响应式依赖
      return this.someOtherData.trim().toLowerCase();
    }
  }
});

当 someOtherData 变化时，someComputedProp 将会重新计算。

4. 侦听器（Listeners）方法

使用 $watch API 来监听数据的变化，这是编程式的监听方式，可以在任何地方添加，比如在 created() 或 mounted() 钩子中。

new Vue({
  data() {
    return {
      anotherData: ''
    }
  },
  created() {
    this.$watch('anotherData', (newValue, oldValue) => {
      // 做一些事情
    });
  }
});

5. .sync 修饰符

.sync 修饰符可以用在 props 上，以便在子组件中更新父组件的状态，这是一个语法糖，可以展开为一个自动更新父级属性的 v-on 监听器。

6. 注意事项

• 使用 watch 的时候要注意性能问题，不要过度使用或进行复杂的计算，否则可能导致性能问题。
• 计算属性是基于它们的响应式依赖进行缓存，只有在依赖发生变化的时候才会重新求值，这通常用于有依赖变化的情况下计算新值的场景。
• 使用 vm.$watch() API 监听属性时，它返回一个用来解除监听的函数，你可以在组件销毁时调用他来停止监听。
• 使用 .sync 修饰符时注意不要在两个方向上修改同一个数据，以避免无限的渲染循环问题。这一点在 Vue 3.x 的 Composition API 中通过使用 ref 和 reactive 的响应式系统来提供了更好的解决方案。