vue3.0 watch监听器使用方法

Vue2

export default {
      watch:{
    
    }
  }

Vue3

1、侦听ref创建的data数据

 import {ref,watch,} from 'vue'

export default {
    setup() {
      const name = ref("张三")
     /**
      * watch：侦听数据变化
      * oldvalue：系统自动注入，更新之前的数据
      * value：系统自动注入，更新之后的最新数据
      * **/
       // 普通侦听器
      watch(name, function (value, oldvalue) {
        console.log(value, oldvalue)
      })
      return {
        name,
      }
    },
  }

2、侦听 reactive 创建的data数据

 import {ref,reactive,} from 'vue'

setup中监听某个对象属性（不可以）

export default {
    setup() {
       const user = reactive({
        name: ''
      })
     	//不支持侦听某个对象的属性user.name（Vue2中可以使用）
      watch(user.name, function (value, oldvalue) {
        console.log(value, oldvalue)
      })
      //只可以监听对象
      watch(user, function (value, oldvalue) {
        console.log(value, oldvalue)
      })
      return {
        user,
      }
    },
  }

组件内对象中监听某个对象属性

    setup() {
      const user = reactive({
        name: ''
      })
      watch(user.name, function (value, oldvalue) {
        console.log(value, oldvalue)
      })

      return {
        user
      }
    },
    data() {
      return {
        list: ["vue", "uniapp", ""]
      }
    },
    //组件内监听：
    watch: {
      "user.name": function (value, oldvalue) {
        console.log(value, oldvalue)
      },
       // vue3中对数组元素可进行操作,侦听器侦听不到
      list(value, oldvalue) {
        console.log(value, oldvalue)
      }
    },

3、对数组元素进行侦听

<!-- home.vue  -->
<template>
  <div>
    <!-- <h1>{{msg}}</h1> -->
    <!-- <h1>{{reverseMsg}}</h1> -->
    ref创建执行：<input type="text" v-model="name" placeholder="请输入姓名">
    <hr>
    setup内执行：<input type="text" v-model="user.name" placeholder="请输入姓名">
    <hr>
    组件内执行：<input type="text" v-model="user.age" placeholder="请输入姓名">
    <hr>
    <el-button type="primary" @click="handleName">修改</el-button>
  </div>
</template>
<script>
  // 按需导入
  import {
    reactive,
    toRefs,
    ref,
    watch,
    computed
  } from 'vue'
  export default {
    setup() {
      const name = ref("张三")
      const user = reactive({
        name: '',
        age: ""
      })
      /**
       * watch：侦听数据变化
       * oldvalue：系统自动注入，更新之前的数据
       * value：系统自动注入，更新之后的最新数据
       * **/
      // 普通侦听器
      watch(name, function (value, oldvalue) {
        console.log(value, oldvalue)
      })
      // 普通侦听器
      watch(name, function (value, oldvalue) {
        console.log(value, oldvalue)
      }, {
        deep: true
      })

      return {
        name,
        user
      }
    },

    data() {
      return {
        list: ["vue", "uniapp", ""]
      }
    },
    watch: {
      "user.age": function (value, oldvalue) {
        console.log(value, oldvalue)
      },
      // vue3中对数组元素可进行操作,侦听器侦听不到,必须使用深度侦听器来侦听
      list(value, oldvalue) {
        console.log(value, oldvalue)
      },
      // 深度侦听器来侦听
      list: {
        handle(value, oldvalue) {
          console.log(value, oldvalue)
        },
        deep: true
      }

    },

    methods: {
      handleName() {
        this.msg = this.reverseMsg
      }
    },


  }
</script>

<style>
</style>