vue3 watch监听

代码：

<template>
  <div  class="nihao">
    <div>{{title}}</div>
    <button @click="car.price++">count的值：{{ car.price }}</button>
    
  </div>
</template>

<script setup>

  import { reactive, watch } from 'vue'
  let title = '你好，vue3！' 
  let car = reactive({name:"奥迪",price:20})

  const stopWatch = watch(
    car,
    (newValue,oldValue)=>{
      console.log(newValue,oldValue)
    },
    {deep:true}
  )


</script>

<style scoped>
.nihao{
    background-color: bisque;
    height: auto;
}
</style>

说明：

1. 监听是指当对象的数据发生改变时自动执行的操作
2. watch有3个参数，第一个监听对象，第二个回调函数，第三个监听配置
3. 监视的为reactive数据的时候，不添加deep:true，也可以正常监听reactive的对象数据改变，即默认开启深度监听，而且无法关闭监听