一、ref
接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property
.value
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{{ str }}</div>
`,
setup() {
let { ref } = Vue;
let str = ref('hello world');
setTimeout(() => {
str.value = 'world hello';
}, 3000);
return {
number
}
}
})
app.mount("#app")
</script>
通过 proxy 对数据进行封装，当数据变化时，触发模板等内容的更新
通过 proxy，"hello world" 变成 proxy({value:'hello world'}) 这样的一个响应式引用。
ref 用于处理基础类型的数据，str 初始页面的值是 hello world，3 秒过后值会变成 world hello
二、reactive
返回对象的响应式副本
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{{ nameObj.name }}</div>
`,
setup() {
let { reactive } = Vue;
let nameObj = reactive({ name: 'zhangsan' })
setTimeout(() => {
nameObj.name = 'lisi';
}, 3000);
return {
nameObj
}
}
})
app.mount("#app")
</script>
通过 proxy，"{ name: 'zhangsan' }" 变成 proxy({ name: 'zhangsan' }) 这样的一个响应式引用。
ref 用于处理非基础类型的数据，nameObj.name 初始页面的值是 zhangsan，3 秒过后值会变成 lisi
三、readonly 和 toRefs
readonly 用于只读数据，不可修改
toRefs 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>{{ name }}</div>
`,
setup() {
let { reactive, readonly, toRefs } = Vue;
let nameObj = reactive({ name: 'zhangsan' })
// 将值设置为只读模式，则不可修改
// let nameObj = readonly({ name: 'zhangsan' })
setTimeout(() => {
nameObj.name = 'lisi';
}, 3000);
const { name } = toRefs(nameObj);
return {
name
}
}
})
app.mount("#app")
</script>
toRefs 当调用 proxy({ name: 'zhangsan' }) 后，会转换成 { name: proxy({value: 'zhangsan'}) }
转换之后去做解构 name 都会变成一个响应式数据。
