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;elsethis.cm = "";},cm: function(val) {if(val)this.m = parseInt(val) / 100;elsethis.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: {// 计算属性的 gettersomeComputedProp() {// `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 的响应式系统来提供了更好的解决方案。