[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 外层不能被修改，里层能改，但是视图仍然不会更新