[TOC] ## reactive reactive 只能用于對象 ``` import { reactive } from 'vue' const counter = reactive({ count: 0 }) ``` ## ref ref 可用于任何值 ``` import { ref } from 'vue' const message = ref('Hello World!') console.log(message.value) // "Hello World!" message.value = 'Changed' // 更新時是用給value 賦值 // or 對象 const message = ref({ count: 0 }) message.value.count=1 // 對象更新 ``` >注意我們在模板中訪問的 message ref 時不需要使用 .value：它會被自動解包，讓使用更簡單。 ## toRef 作用:可以在子組件中把props 的值,初始化給toRef ``` const saveValue=toRef<string>(props.modelValue) ``` ## watch ### 監聽整個對象 ``` // 只要 userCard 中有一個值變更就會更新 watch( userCard, (newValue:UserCard)=>{ console.log(newValue); }, {deep:true}) ``` ## watchEffect 立即運行一個函數，同時響應式地追蹤其依賴，并在依賴更改時重新執行。 ``` const count = ref(0) watchEffect(() => console.log(count.value)) // -> 輸出 0 count.value++ // -> 輸出 1 ``` 與 watch 區別 - `watch` 實際上監聽的是某個具體的響應式數據，而 `watchEffect` 則是監聽整個函數中使用到的所有響應式數據 - 對于單一數據的監聽，建議使用 `watch`，對于多個響應式數據共同影響的邏輯，可以使用 `watchEffect` ## computed ``` const newTodo = ref('') const hideCompleted = ref(false) const todos = ref([ { id: id++, text: 'Learn HTML', done: true }, { id: id++, text: 'Learn JavaScript', done: true }, { id: id++, text: 'Learn Vue', done: false } ]) const filteredTodos = computed(() => { return hideCompleted.value ? todos.value.filter((t) => !t.done) : todos.value }) ```