vue3中watch/watchEffect用法

watch的语法

// name: 需要观察的对象,curVal:新值,preVal:旧值,options:配置项,deep,immediate
watch(name,(curVal , preVal)=>{},{options})

基本类型

const count = ref(0);
watch(count,(newVal,oldVal) => {
     console.log('值改变了',newVal,oldVal)
 })

Object类型

const obj=ref({
	name:"李四",
	isCollapse:true
})
watch(obj,(newVal,oldVal) => {
    console.log('值改变了',newVal,oldVal)
  },
  { deep: true,immediate:true }
)

观察object类型单个属性

const obj=ref({
	name:"李四",
	isCollapse:true
})
watch(()=>obj.value.isCollapse,(newVal,oldVal) => {
    console.log('值改变了',newVal,oldVal)
  },
  { deep: true,immediate:true }
)

观察多个数据

const count = ref(0);
const obj=ref({
	name:"李四",
	isCollapse:true
})
watch([count,obj],(newVal,oldVal) => {
    console.log('值改变了',newVal,oldVal)
  },
  { deep: true,immediate:true }
)

watchEffect

watchEffect 也是一个帧听器，是一个副作用函数。 它会监听引用数据类型的所有属性，不需要具体到某个属性

  watchEffect(() => {
      console.log('name:',obj.name)
    })

watchEffect停止监听

const stop = watchEffect(() => {
  console.log('name:',obj.name)
})
const stopWatchEffect = () => {
  console.log('停止监听')
  stop();
}

区别

• watch 特点
  watch 监听函数可以添加配置项，也可以配置为空，配置项为空的情况下，watch的特点为：
  有惰性：运行的时候，不会立即执行；
  更加具体：需要添加监听的属性；
  可访问属性之前的值：回调函数内会返回最新值和修改之前的值；
  可配置：配置项可补充 watch 特点上的不足：
  immediate：配置 watch 属性是否立即执行，值为 true 时，一旦运行就会立即执行，值为 false 时，保持惰性。
  deep：配置 watch 是否深度监听，值为 true 时，可以监听对象所有属性，值为 false 时保持更加具体特性，必须指定到具体的属性上。

• watchEffect 特点
  非惰性：一旦运行就会立即执行；
  更加抽象：使用时不需要具体指定监听的谁，回调函数内直接使用就可以；
  不可访问之前的值：只能访问当前最新的值，访问不到修改之前的值；