vue3中watch和watchEffect

vue3中,watch对象全部属性的时候,存在一个暂时无解问题:获取不到old数据

let book= reactive ({
  name: 'JavaScript高级程序设计',
  publish_time: 2022
})

watch(book, (newValue, oldValue) => {
  console.log('book---', newValue, oldValue)
})
// 获取不到oldValue, 输出的都是新数据

vue3可同时监听多个值

let value1 = ref('hello')
let value2 = ref('javascript')

watch([value1, value2], (newValue, oldValue => {
  console.log(newValue, oldValue)
})

watch对象中的某个属性

let book= reactive ({
  name: 'JavaScript高级程序设计',
  publish_time: 2022
})
watch(() => book.name, (newValue, oldValue => {
  console.log(newValue, oldValue)
})

watch对象中的多个属性

let book= reactive ({
  name: 'JavaScript高级程序设计',
  publish_time: 2022
})
watch([() => book.name, () => book.publish_time], (newValue, oldValue => {
  console.log(newValue, oldValue)
})

如果watch对象里面的对象的属性,需要deep: true

let book= reactive ({
  name: 'JavaScript高级程序设计',
  publish_time: 2022,
  value: {
    obj: {
      age: 18
    }
  }
})
watch(() => book.value, (newValue, oldValue => {
  console.log(newValue, oldValue)
}, {deep: true})  
// 也不能获取到oldValue

watchEffect 不需要指定watch哪个,里面用到了哪个属性就会监听哪个属性,有点类似于vue2中的computed,某个值变化了就会执行

let age = ref(18)
let name = ref('凹凸曼')
let school = ref('中学')

watchEffect(() => {
  const a = age.value
  const n = name.value
  console.log('change-----')
}) 
// 只要name或者age变化了,watchEffect就会响应,但是school变化了不会执行

你可能感兴趣的:(vue3中watch和watchEffect)