1、ref
- ref 用于为数据添加响应式状态。只能操作基本数据类型。返回一个具有响应式状态的副本。
const app = Vue.createApp({
template:`<div>{{name}}</div>`,
setup(props,conttext){
const { ref } = Vue;
let name = ref('吴彦祖');
return { name }
}
});
const vm = app.mount('#root');
- 原理：通过 ref 对数据进行封装，当数据变化时，触发模版等内容的更新。通过proxy把name变成 proxy({value: '吴彦祖'}) 这样的一个响应式引用。
2、reactive
- reactive 用于为对象添加响应式状态。接收一个对象作为参数，返回一个具有响应式状态的副本。获取数据值的时候直接获取，不需要加.value，参数只能传入对象类型。
const app = Vue.createApp({
template:`<div>{{objname}}---{{age}}</div>`,
setup(props,conttext){
const { reactive, readonly, toRefs } = Vue;
let nameObj = reactive({name:'刘德华',age:27})
setTimeout(() => {
nameObj.name= '张学友';
}, 2000);
const {name, age} = toRefs(nameObj);
return { name, age }
}
});
const vm = app.mount('#root');
3、toRefs
- toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。
- 原理：通过 toRefs将{name:'刘德华',age:27} 变成 { name: proxy({ value: 'dell'}),age: proxy({value: 28}) }
4、toRef
const app = Vue.createApp({
template:`<div>{{age}}</div>`,
setup(props,conttext){
const { reactive, toRef } = Vue;
let data = reactive({name:'刘德华'})
const age = toRef(data,'age');
setTimeout(() => {
data.age = 27;
}, 2000);
return { age }
}
});
const vm = app.mount('#root');
toRef函数和toRefs函数的区别:
(https://blog.csdn.net/wuxing164/article/details/109801542?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-109801542-blog-112287552.pc_relevant_multi_platform_whitelistv5&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-109801542-blog-112287552.pc_relevant_multi_platform_whitelistv5&utm_relevant_index=2)
