vue3中 对不同类型的数据处理使用不同的函数方法 基本数据类型使用ref 复杂数据类型使用reacive
ref
在vue3 中ref 是处理数据 需要引入使用
ref 可以将 基本的数据类型 通过一定的方式(Object.defineProperty) 变为响应式的(引用实例对象【RefImpl】)
如果在js 中操作数据 要使用 .value
如果是 复杂数据类型将会使用reactive
需要注意的是 需要 return 出去才可以使用
import { ref ,reacive} from "vue";
export default {
name: "HelloWorld",
setup() {
let name = ref("张三");
let msg = ref("hello");
function (){
name.value = '李四'
}
return {
name,
msg,
};
},
};
reacive
定义一个复杂数据类型的数据 不推荐用来定义基本数据类型
会通过Proxy 将数据修改为 响应式数据
修改数据时 可直接修改
export default {
name: "HelloWorld",
setup() {
let name = ref("张三");
let msg = ref("hello");
let obj = reactive({
age: 18,
b: {
c: {
d: 23,
},
},
});
return {
name,
obj,
msg,
};
},
};
toRef 和 toRefs
toRefs 和 toRef 功能一致 但可以批量创建多个ref 对象 返回值是一个对象
setup(){
let name = ref("张三");
let msg = ref("hello");
let obj = reactive({
age: 18,
b: {
c: {
d: 23,
},
},
});
return {
toRef(obj.age),
...toRefs(obj),
msg,
};
}
shallowReactive 与 shallowRef
shallowReactive 只处理对象最外层属性的响应式(浅响应)
enter
shallowRef 只处理基本数据类型的响应式 不进行复杂数据类型的响应式处理
readonly 与 shallowReadonly
readonly 让一个响应式数据变为只读的(深只读)
shallowReadonly 让一个响应式数据变为只读的(浅只读)
toRaw 与 markRaw
toRaw 将一个由
reactive
生成的 响应式数据 转为 普通对象(如果改变数据不想引起页面变化的时候)
markRaw 标记一个对象使其永远不会再成为响应式对象(当渲染大量不可变数据时 跳过响应式可以提高性能)
customRef
自定义ref