watch的用法

<template>
  <div class="home">
    {{state.obj.age}}
    <button @click="state.obj.age++">num++</button>
  </div>
</template>

<script setup>
import { watch, ref, reactive,computed  } from 'vue'
        //计算属性
    let count=ref(1)
     const double = computed(()=>{
      return count.value* 2;
       }}


// const num = ref(0)
// 第一个参数是要监听变化的数据 第二个是数据变化后出发的回调函数 第三个是配置项
// watch(num, (newVal, oldVal) => {
//   console.log(newVal, oldVal)
// })
const state = reactive({
  num: 1,
  obj: {
    name: 'zhangsan',
    age: 16
  }
})
// 这种情况下我们第一个参数需要使用一个函数返回需要监听的数据
watch(() => state.obj, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, {
  deep: true, // 开启深度监听
  immediate: true // 值如果是true会打开首次监听
})
</script>

监听基本数据可以直接开启监听，复杂数据类型通过函数导入开启监听

vue2

data() {
    return {
      num: 1
      obj：{name:"张三"}
    }
  },
watch: {
    num(newVal, oldVal) {
      console.log(newVal, oldVal)
    }
     obj:{
        handler(newVal, oldVal) => {
          console.log(newVal, oldVal)//新值，旧值
        },
        deep:true, //深监听     
        immediate: true // 值如果是true会打开首次监听
    }
 }

  <p>reversed message: {{ reversedMessage }}</p>

    data(){
        message:["a","b","c"]
    }

  computed: {
  	//计算属性的getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }

    methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
        reversedMessage () {
        return this.message.split('').reverse().join('')
      }
     }