[toc] ### 1. ref js中需要通過count.value操作，html中顯示則不需要 ``` const count = ref(0); const double = computed(() => { return count.value * 2; }) const increase = () => { count.value++; } return { count, double, increase } ``` 2. setup中ref定義的值name是一個ref對象，name.value是值，但是在mounted中name即是值 ``` setup() { console.log(username, username.value); // ref, value } mounted() { console.log(this.username) // value } ``` ### reactive 如果通過...解構的方式賦值，則需要通過toRefs轉化為響應式 ``` // 響應式 const data = reactive({ count: 0, increase: () => { data.count++ }, double: computed(() => data.count * 2) }) // 轉化為響應式對象 const refData = toRefs(data); return { ...refData // 取出來之后必須要通過toRefs變成響應式 } ``` reactive 如果直接創建數組，會失去響應式，解決辦法，創建對象中包含數組，或者用ref創建簡單數組 ### shallowReactive 創建的proxy對象只會代理第一次，內層失去響應式 ### readonly 會被代理，但是不能被修改 ### shallowReadonly 外層不能被修改，里層能改，但是視圖仍然不會更新