前端编程开发 --- vue3 监听属性

监听变量的变化并触发函数

 

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>        //counter++表示变量自增
</div>
    
<script>
const app = {
  data() {
    return {
      counter: 1
    }
  }
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('counter', function(nval, oval) {  //在vm中创建监听器，监听counter变量的变化，变化就触发该函数，nval, oval是vue预先定义好的
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
</body>
</html>

整个执行流程可以总结为：加载页面 -> 创建Vue应用实例 -> 挂载应用实例到DOM元素 -> 点击按钮 -> `counter`值增加1 ->  触发`counter`的watcher函数 -> 更新页面上的计数器显示 

或者

  watch : {
    kilometers:function(newValue, oldValue) {
      // 判断是否是当前输入框
      if (this.currentlyActiveField === 'kilometers') {
        this.kilometers = newValue;
        this.meters = newValue * 1000
      }
    },
    meters : function (newValue, oldValue) {
      // 判断是否是当前输入框
      if (this.currentlyActiveField === 'meters') {
        this.kilometers = newValue/ 1000;
        this.meters = newValue;
      }
    }

 

区别

watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作；

computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算；

除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。Watch也可以检测computed属性。