筆記一下 Vue3 開發時，必備的一些讓元件自動或是手動觸發更新的技巧。
內容
自動更新
1. 使用 watch
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template> <div>{{ count }}</div> <button @click="update">更新</button> </template> <script> import { ref, watch } from 'vue' export default { setup() { const count = ref(0) const update = () => { count.value++ } watch(count, (newValue, oldValue) => { console.log('New Count Value：', newValue) // 做一些其他操作 }) return { count, update } } } </script> |
2. 使用 computed
藉由 computed 會基於依賴項的變化而更新的需求，這樣一來寫起來會更加簡潔
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <div>{{ count }}</div> <span>{{ doubleCount }}</span> <button @click="update">更新</button> </template> <script> import { ref, computed } from 'vue' export default { setup() { const count = ref(0) const update = () => { count.value++ } const doubleCount = computed(() => count.value * 2) return { count, doubleCount, update } } } </script> |
3. Provide / Inject
若是兩個子元件相互的共享，可以用 Provide / Inject 的方法，省出層層傳值的困擾
手動更新
常用的一種情況是你的數值更新是深層物件內的變化，這個變化並不一定可以順利或是用簡易的方式被監聽到而觸發元件刷新，那你可以在元件上加上一個如 count 的變數。每當你想要觸發更新時，就將值 + 1 即可。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div>{{ count }}</div> <a @click="fetch"> Fetch </a> <ChildComponent :count="count" /> </template> <script> import { ref } from 'vue' import ChildComponent from './ChildComponent.vue' export default { setup() { const count = ref(0) const fetch = async() => { console.log('fetch finished') count++ } return { count, } } } </script> |
參考資料
1. vue3组件刷新
按讚加入粉絲團
