VUE 之侦听器(watch)

目录

侦听器

1.改变时调用该函数

2.初始化调用该函数

 3.深度监听

计算属性 vs 侦听器

侦听器

官网对watch的介绍:当需要在数据变化时执行异步或开销较大的操作可以用这个方法。

简单实现:

1.改变时调用该函数

export default{
  data(){
    return{
      message : '我就是太阳',
    }
  },
    watch: {
      //监听数据的变化
      message:function(newValue,oldValue){
           console.log(newValue,oldValue);
          //我们可以在这里做一些异步操作 复杂代码 当该数据变化时
      }
    }
  }
</script>

<template>
   <div >{{message}}</div>
   <button @click="message='我就是天地'">改变message的值</button>
</template>

点击前:

点击后:

2.初始化调用该函数

immediate: true 将立即以表达式的当前值触发回调

代码:

export default{
  data(){
    return{
      message : '我就是太阳',
    }
  },
    watch: {
      //监听数据的变化
      message:
      {
        immediate: true, //初始化的时候调用函数
        handler:function(newValue,oldValue){
          console.log(newValue,oldValue);
          //我们可以在这里做一些异步操作 复杂代码 当该数据变化时
      }
      }
    }
  }
</script>

<template>
   <div >{{message}}</div>
   <button @click="message='我就是天地'">改变message的值</button>
</template>

 3.深度监听

为了发现对象内部值的变化，可以在选项参数中指定 deep: true。这个选项同样适用于监听数组变更。

注意：当变更（不是替换）对象或数组并使用 deep 选项时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

代码:

export default{
  data(){
    return{
      user:{
        userName: '张三',
        age: 20
      }
    }
  },
    watch: {
      //监听数据的变化
      user:{
        handler:function(newValue){
          console.log(newValue);
          //我们可以在这里做一些异步操作 复杂代码 当该数据变化时
      },
      //侦听器会一层一层的向下遍历,给对象每个属性都加上侦听器
      deep: true
      }
    }
  }
</script>

<template>
   <div >{{user.age}}</div>
   <button @click="user.age=2">改变age的值</button>
</template>

计算属性 vs 侦听器

官网给的小建议:

Vue 提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，watch 很容易被滥用——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。