vue3系列：（三）vue3使用watch、watchEffect实现监听

watch

watch API 完全等同于组件侦听器 property。watch 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调，它接受3个参数

• 一个想要侦听的响应式引用或 getter 函数
• 一个回调
• 可选的配置选项

侦听单个数据源

侦听器数据源可以是返回值的 getter 函数，也可以直接是 ref：

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ...do some thing... */
  }
)

// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ...do some thing... */
})

复制代码

侦听多个数据源

如果你在同一个函数里同时改变这些被侦听的来源，侦听器仍只会执行一次：

setup() {
  const firstName = ref('')
  const lastName = ref('')

  watch([firstName, lastName], (newValues, prevValues) => {
    console.log(newValues, prevValues)
  })
  
 //注意多个同步更改只会触发一次侦听器
  const changeValues = () => {
    firstName.value = 'John'
    lastName.value = 'Smith'
    // 打印 ["John", "Smith"] ["", ""]
  }

  return { changeValues }
}
复制代码

侦听响应式对象

使用侦听器来比较一个数组或对象的值，这些值是响应式的，要求它有一个由值构成的副本

const numbers = reactive([1, 2, 3, 4])

watch(
  () => [...numbers],
  (numbers, prevNumbers) => {
    console.log(numbers, prevNumbers)
  }
)

numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4]
复制代码

watchEffect

为了根据响应式状态自动应用和重新应用副作用，我们可以使用 watchEffect 函数。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数

• 它是立即执行的，在页面加载时会主动执行一次，来收集依赖
• 不需要传递需要侦听的内容，它可以自动感知代码依赖，只需要传递一个回调函数
• 它不能获取之前数据的值
• 它的返回值用来停止此监听

import { ref, reactive, watchEffect } from "vue"; 
const age = ref(18);
const watchAge = ref(0); 
const doubleAge = () => { 
    watchAge.value = age.value * 2; 
    }; 
const stop = watchEffect(() => { 
if (watchAge.value < 60) { doubleAge();
} else { 
stop();  //停止监听
} });

复制代码

(\ _ /)
( * . *)
/>❤️