toRef
如果原始对象是非响应式的就不会更新视图 数据是会变的
toRefs
批量创建ref对象主要是方便我们解构使用
toRaw
将响应式对象转化为普通对象
<template>
<div>
oldValue：{{ oldValue }} newValue:{{ newValue }}
<button @click="changetoRef()">改变changetoRef</button>
oldValue：{{ oldRef }} --newValue:{{ lName }}{{ lage }} --toRowValue:{{toRowValue}}
<button @click="changetoRefs()">改变changetoRefs</button>
<button @click="changetoRow()">改变toRow</button>
</div>
</template>
<script>
import {
ref,
shallowReactive,
shallowRef,
triggerRef,
customRef,
reactive,
readonly,
toRef,
toRefs,
toRaw,
} from "vue";
export default {
setup() {
//改变Reactive
let oldValue = {
name: "乌瑟尔",
age: 18,
};
let newValue = toRef(oldValue, "age");
function changetoRef() {
newValue.value = 14;
console.log(oldValue);
console.log(newValue);
}
let oldRef = reactive({
name: "罗大佑",
age: 65,
});
let { name: lName, age: lage } = toRefs(oldRef);
let changetoRefs = () => {
oldRef.age = 14;
console.log(oldRef);
console.log(lName.value, lage.value);
};
let toRowValue = toRaw(oldRef);
let changetoRow = () => {
toRowValue.age = 49;
toRowValue.name = "李宗盛";
console.log(oldRef);
console.log(toRowValue);
};
return {
oldValue,
newValue,
changetoRef,
changetoRefs,
oldRef,
lName,
lage,
changetoRow,
toRowValue
};
},
};
</script>
