## VUE3.0 ### watchEffect * watchEffect 默認進入頁面立即執行 ``` setup() { // watchEffect: 自動收集響應式的依賴 const name = ref("why"); const age = ref(18); const changeName = () => name.value = "kobe" const changeAge = () => age.value++ watchEffect(() => { console.log("name:", name.value, "age:", age.value); }); return { name, age, changeName, changeAge } } ``` * 停止偵聽 ``` const stop = watchEffect(() => { console.log("name:", name.value, "age:", age.value); }); stop(); //調用stop()方法停止偵聽 ``` * 執行時機 flush `post` `pre` `sync` 默認 pre ``` watchEffect(() => { console.log(title.value); }, { flush: "post" }) ``` ### watch ``` setup() { const info = reactive({name: "why", age: 18}); // 1.偵聽watch時,傳入一個getter函數 watch(() => info.name, (newValue, oldValue) => { console.log("newValue:", newValue, "oldValue:", oldValue); }) // 2.傳入一個可響應式對象: reactive對象/ref對象 // 情況一: reactive對象獲取到的newValue和oldValue本身都是reactive對象 watch(info, (newValue, oldValue) => { console.log("newValue:", newValue, "oldValue:", oldValue); }) // 如果希望newValue和oldValue是一個普通的對象 watch(() => { return {...info} }, (newValue, oldValue) => { console.log("newValue:", newValue, "oldValue:", oldValue); }) // 情況二: ref對象獲取newValue和oldValue是value值的本身 const name = ref("why"); watch(name, (newValue, oldValue) => { console.log("newValue:", newValue, "oldValue:", oldValue); }) const changeData = () => { info.name = "kobe"; } return { changeData, info } } ```