1。除了获取元素，refref属性还可以使用ref函数创建响应式数据。当数据值改变时，视图会自动更新。
{{newObj}}
{{newObj}}
1。除了获取元素，refref属性还可以使用ref函数创建响应式数据。当数据值改变时，视图会自动更新。{{str}}2。isRef检查变量是否是ref包裹的对象，如果是则返回true，否则返回false。import{ref,isRef,reactive}from'vue'letstr:string=ref('我是张三')letnum:number=1letper=reactive({name:'代码女神',work:'程序元'})console.log('strRes',isRef(str))//trueconsole.log('numRes',isRef(num))//falseconsole.log('perRes',isRef(per))//false3,toRef创建一个ref对象，其值指向另一个对象中的属性。toRef(obj,key)将对象中的一个值转换为响应式数据，分为两种情况：toRef定义了原始的非响应式数据，当修改值时，原始数据和副本数据都会发生变化，但是视图不更新。<脚本>import{ref,isRef,toRef,reactive}from'vue'letobj={name:'name',age:18,}letname:string=toRef(obj,'name')constchang=()=>{obj.name='钻石王老吴'name.value='李四'console.log(obj.name)//李四console.log('name',name)//李四}//chang()//DOM挂载前调用{{obj.name}}------{{name}}注意：如果在DOM挂载之前调用chang方法改变了value，那么data和view都会发生变化。toRef定义原始数据响应数据。修改值时，原始数据和副本数据都会发生变化，视图也会随之更新。{{obj.name}}------{{name}}最终值为“李四”。4、toRefstoRefs用于解构ref和reactive包裹的响应式数据。接收一个对象作为参数，遍历对象上的所有属性，将对象上的所有属性变成响应式数据。letobj=reactive({name:'Name',age:18,})let{name,age}=toRefs(obj)constchang=()=>{name.value='DiamondKing'age.value++}{{name}}------{{age}}toRefs在解构数据时，如果有些参数是可选参数，可选参数不存在会报错，如：letobj=reactive({name:'name',age:18,})let{name,age,work}=toRefs(obj)constchang=()=>{name.value='钻石王'age.value++console.log('work',work.value)work.value='程序Yuan'}这个时候就可以使用toRef来解决这个问题。使用toRef解构对象的属性时，首先检查该属性是否存在于对象上。如果存在，则继承该对象的属性值。如果它不存在，它将创建一个。将上面的代码修改为：letobj=reactive({name:'name',age:18,})let{name,age}=toRefs(obj)letwork=toRef(obj,'work')constchang=()=>{name.value='DiamondKing'age.value++console.log('work',work.value)work.value='程序元'}5.toRaw将响应式对象转换为原始对象。做一些你不想被监控的事情，从ref或reactive获取原始数据。修改原始响应式数据时，将修改toRaw转换的数据，更新视图，如：{{obj.name}}------{{obj.age}}如果修改toRaw获取的原始数据，原始数据也会被修改，但不会更新视图。如：
{{newObj}}{{obj.name}}------{{obj.age}}
{{newObj}}