Vue3：监听属性

监听属性

• 与vue2.x中的watch配置功能一致

• 注意

• 监视reactive定义的响应式数据时，oldvalue无法正确获取，强制开始了深度监视（deep的配置失效）

• 监视reactive定义的响应式数据的某一个值时：deep配置有效

<template>
  <div class="home">
    <h1>{{num}}</h1>
    <h1>{{msg}}</h1>

    <button @click="num++">点击num++</button>
    <button @click="addmsg()">点击msg+！</button>
  </div>
</template>

<script>

// 注意:vue2.x和vue3.x不要混用
// 1.引入
import { watch, ref,reactive } from "vue"
export default {

  data() {
    return {

    }
  },
  computed: {
  },


  setup() {

    let num = ref(0);
    let msg = ref("hello");
    let person = reactive({
        name:"李国栋",
        age:18,
        more:{
            job:"前端开发工程师",
            salary:"12k"
        }
    })

    // 1.监听ref定义的响应式数据
    watch(num, (newvalue, oldvalue) => {
      console.log("num变量", newvalue, oldvalue);
    })


    // 2.监听多个ref定义的响应式数据
    watch([num, msg], (newvalue, oldvalue) => {
      console.log("msg数据变化了", newvalue, oldvalue);
    })

    let addmsg = () => {
      msg.value += "!"
    }
    
    
    //3.监听reactive所定义的一个响应式数据的全部属性
    //注意：此处无法正确的获取oldvalue
    //注意：并且强制开启了深度监视(deep配置无效)
    
    watch(person, (newvalue, oldvalue) => {
      console.log("person数据变化了", newvalue, oldvalue);
    },{deep:false})
      
    //4.监听reactive所定义的一个响应式数据的某一个属性
    watch(()=>person.name, (newvalue, oldvalue) => {
      console.log("person数据变化了", newvalue, oldvalue);
    },{deep:false})

    return { num, msg, addmsg }

  }

}
</script>