Vue3-watch和watchEffect

watch

• watch可以监听一个或多个响应式数据， 一旦数据变化， 就自动执行监听回调
• 如果监听rective对象中的属性， 必须通过函数来指定， 如果监听多个数据，需要使用数组来指定，默认初始时不执行回调
• 可以通过配置immediate为true，来指定初始时立即执行第一次，通过配置deep为true，来指定深度监听
• watch（prop, (newValue, oldValue) => {}）监听新旧属性

watchEffect

• watchEffect 不需要手动传入依赖
• watchEffect默认初始时就会执行第一次
• watchEffect 无法获取到变化前的值， 只能获取变化后的值

<template>
  <div :style="{'textAlign': 'left', marginTop: '10px'}">
    {{ area.province }} -- {{ area .city}} <el-button @click="setArea">改变数据</el-button>
  </div>
</template>

<script setup>
import { reactive, watch, watchEffect } from 'vue';
const area = reactive({
  province: '广东',
  city: '深圳'
})

const setArea = () => {
  area.province = '湖南'
  area.city = '长沙'
}

// 监听引用类型中的一个属性
watch(
  () => area.province,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
  }
)

// 监听多个属性
watch(
  [() => area.province, () => area.city], 
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
  }
)

// 立即监听和深度监听
watch([() => area.province, () => area.city], (newVal, oldVal) => {
  console.log(newVal, oldVal)
  },{
    immediate: true,
    deep: true
  }
)
// watchEffect 用到哪个属性就会监听哪个属性
watchEffect(() => {
  console.log(area.province, area.city)
})

// 监听父组件传过来的id
watch(() => props.id, (newVal) => {
  if (!newVal) return
  searchData()
})
</script>