6-18 watch和watchEffect的区别
watch 会明确监听某一个响应数据,而 watchEffect 则是隐式的监听回调函数中响应数据。 watch 在响应数据初始化时是不会执行回调函数的, watchEffect 在响应数据初始化时就会立即执行回调函数
<template> <p>watch vs watchEffect</p> <p>{{numberRef}}</p> <p>{{name}} {{age}}</p> </template> <script> import { reactive, ref, toRefs, watch, watchEffect } from 'vue' export default { name: 'Watch', setup() { const numberRef = ref(100) const state = reactive({ name: '双越', age: 20 }) watchEffect(() => { // 初始化时,一定会执行一次(收集要监听的数据) console.log('hello watchEffect') }) watchEffect(() => { console.log('state.name', state.name) }) watchEffect(() => { console.log('state.age', state.age) }) watchEffect(() => { console.log('state.age', state.age) console.log('state.name', state.name) }) setTimeout(() => { state.age = 25 }, 1500) setTimeout(() => { state.name = '双越A' }, 3000) // watch(numberRef, (newNumber, oldNumber) => { // console.log('ref watch', newNumber, oldNumber) // } // // , { // // immediate: true // 初始化之前就监听,可选 // // } // ) // setTimeout(() => { // numberRef.value = 200 // }, 1500) // watch( // // 第一个参数,确定要监听哪个属性 // () => state.age, // // 第二个参数,回调函数 // (newAge, oldAge) => { // console.log('state watch', newAge, oldAge) // }, // // 第三个参数,配置项 // { // immediate: true, // 初始化之前就监听,可选 // // deep: true // 深度监听 // } // ) // setTimeout(() => { // state.age = 25 // }, 1500) // setTimeout(() => { // state.name = '双越A' // }, 3000) return { numberRef, ...toRefs(state) } } } </script>
谢谢老师,讲的非常细致,很容易懂。这一节学的是vue3用 watch和watchEffect的区别,为以后的学习打下了基础。
原来vue3能有这么多种性质,以及对vue3有了新的认识,期待后边的学习