watch只能监听4种类型数据:ref、reactive、getter函数、上述三种组成的数组
注意:
① 监听ref定义的对象类型,监听的是对象地址变化,开启深度监视之后才可以监听到内部任意属性变化
② 监听reactive定义的对象类型,强制开启了深度监视(不可关掉)
③ 监听ref/reactive对象中的某个基本类型数据时,必须写成箭头函数形式返回
④ 监听ref/reactive对象中的某个引用类型数据时,不写箭头函数,监听的是内部所有属性变化;写成箭头函数监听的是地址,需开启深度监视才既能监听地址变化,又能监听内部所有属性变化
- 可以监听一个属性,也可以监听多个属性(数组形式,同时newValue和oldValue返回的也是数组形式)
<script> import { ref, watch } from 'vue'; export default { setup() { let msg = ref('hello world'); // 监听一个ref属性 watch(msg, (newValue, oldValue) => { console.log(newValue, oldValue); }, {immediate: true}); // 监听多个ref属性 let count = ref(0); watch([msg, count], (newValue, oldValue) => { console.log(newValue, oldValue); // newValue和oldValue是数组,与监听的属性数组相对应 }, {immediate: true}); return { msg, count } } } </script>
- 监听reactive类型数据
<script> import { reactive, watch } from 'vue'; export default { let person = reactive({ name: 'wu', age: 18, job: { city: 'tianjin' }, hobby: ['eat', 'drink'] }); // 监听reactive直接定义的响应式数据,因地址相同,所以oldValue与newValue同值,且强制开启了深度监听(不可关闭) watch(person, (newValue, oldValue) => { console.log(newValue, oldValue); }, {immediate: true, deep: false}); // 监听reactive定义的响应式数据中的某个属性,需要通过函数形式返回 watch(() => person.name, (newValue, oldValue) => { console.log(newValue, oldValue); }, {immediate: true}); // 监听reactive定义的响应式数据中的某个对象属性,不开启深度监视,只有job地址变化才会触发watch,开启深度监视,当内容任何数据发生变化时,都会触发watch watch(() => person.job, (newValue, oldValue) => { console.log(newValue, oldValue); }, {immediate: true, deep: true}); return { person } } </script>
- watchEffect
说明:
① 在页面初始化的时候会执行一次
② watch必须指定需要监听哪个对象,而watchEffect无需指定,函数内部用到了哪个属性,等这个属性变化时,watchEffect会自动调用<template> <button @click="changeCount">改变count</button> <button @click="changeName">改变Name</button> </template>
<script> import { ref, reactive, watchEffect } from 'vue'; export default { setup() { let count = ref(0); let person = reactive({ name: 'wu' }); watchEffect(() => { console.log(count.value); console.log(person.name); console.log('此处用到了count和person的name属性,count和name变化时,会自动调用此方法') }); function changeCount() { count.value++; } function changeName() { person.name += '~'; } return { count, person, changeCount, changeName }; } } </script>