Vue3中Watch详细用法

Vue3中Watch详细用法

一、以下是可以被 watch 监听的数据类型：

• ref：用于监听单一的响应式数据。
• reactive：用于监听复杂的响应式对象，默认深度监听。
• 计算属性：可以监听基于其他响应式数据计算得出的属性。
• getter函数：通过传入函数，监听函数返回值的变化。

这些数据类型在 watch 中都可以被监听，以便在数据变化时执行特定的回调函数。

二、监听ref类型

监听基本数据类型

import { ref, watch } from 'vue';
​
const a = ref(0);
const b = ref('b');
​
// 监听单个基本类型的数据
watch(a, (val) => {
  console.log('🚀 ~ watch ~ val:', val);
});
​
// 监听多个基本数据类型
watch([a, b], (newVal, oldVal) => {
  console.log("🚀 ~ watch ~ oldVal:", oldVal);
  console.log("🚀 ~ watch ~ newVal:", newVal);
})

ref 定义引用类型的数据，默认是浅层监听，需开启深度监听

const person = ref({
  name: 'ZhangSan',
  age: 30,
  height: 180,
  weight: '70kg',
  hobbies: ['basketball', 'swimming', 'game']
});
​
function onChange() {
  person.value.name = 'LiSi';
}
// 监听不到
watch(person, (val) => {
  console.log("🚀 ~ watch ~ person:", val);
})
// 开启深度监听可检测到
watch(
  person,
  (val) => {
    console.log("🚀 ~ watch ~ person:", val);
  },
  {
    deep: true
  }
)
// 或 '.value'获得reactive属性，当 ref 的值是一个对象时，ref() 也会在内部调用它
// 该方法不推荐，不利于可读性
watch(
  person.value,
  (val) => {
    console.log("🚀 ~ watch ~ person:", val);
  }
)
​

三、监听reactive类型

监听reactive数据类型默认为深度监听且获取不到旧数据

const person = reactive({
  name: 'ZhangSan',
  height: 180,
  weight: '70kg',
  hobbies: ['basketball', 'swimming', 'game']
});
​
function onChange() {
  person.name = 'LiSi';
}
​
watch(person, (newVal, oldVal) => {
  console.log("🚀 ~ watch ~ oldVal:", oldVal) // oldVal 与 newVal相等
  console.log("🚀 ~ watch ~ newVal:", newVal)
})

reactive定义的对象数据中的某个属性被监听时为浅层监听

const person = reactive({
  name: 'ZhangSan',
  height: 180,
  age: 30,
  weight: '70kg',
  hobbies: ['basketball', 'swimming', 'game']
});
​
function onChange() {
  person.name = 'LiSi';
  person.hobbies[0] = 'football';
}
// 监听单个值
watch(() => person.name, (name) => {
  console.log("🚀 ~ watch ~ name:", name); // LiSi
})
// 监听不到hobbies的变化
watch(() => person.hobbies, (hobbies) => {
  console.log("🚀 ~ watch ~ hobbies:", hobbies);
})

function onChange() {
  person.name = 'football';
  person.age = 31;
}
watch([() => person.name, () => person.age], (val) => {
  console.log("🚀 ~ watch ~ val:", val); // [football, 31]
})

三、监听数据类型

计算属性会重新计算重新返回一个新的结果，虽浅层监听但是是整体替换。

const a = ref(0);
const b = ref(2);
const sum = computed(() => a.value + b.value)
function onAdd() {
  a.value++
}
watch(sum, (val) => {
  console.log("🚀 ~ watch ~ val:", val) // 3
})

四、如果希望watch立即执行一次，添加第三个参数 { immediate: true }

watch(
  sum,
  (val) => {
    console.log("🚀 ~ watch ~ val:", val) // 3
  },
  { immediate: true }
  )
​