湟源县网站建设,wordpress删除未分类,云南网站设计模板,网站推广的公司哪家好ref、reactivesetup 函数中默认定义的变量并不是响应式的#xff08;即数据变了以后页面不会跟着变#xff09;#xff0c;如果想让变量变为响应式的变量#xff0c;需要使用 ref 和 reactive 函数修饰变量。区别#xff1a;reactive只能传入对象类型的参数#xff0c;所…ref、reactivesetup 函数中默认定义的变量并不是响应式的即数据变了以后页面不会跟着变如果想让变量变为响应式的变量需要使用 ref 和 reactive 函数修饰变量。区别reactive只能传入对象类型的参数所以基本数据类型添加响应式状态只能用ref当然ref也可以定义复杂的数据ref 获取数据值需要加.value注ref底层使用的是proxy代理函数实现双向绑定proxy 函数必须要接收一个对象如果想修改 name 的值需要使用 name.valuetoRef、toRefs区别toRef只希望转换一个reactive对象中的属性为ref获取数据值需要加.valuetoRefs可以将reactive返回的对象中的属性都转成ref注toRefs 使用ES6的解构语法因为一个响应式对象直接结构时结构后的数据不再具有响应式Vue为我们提供了一个toRefs的函数可以将reactive返回的对象中的属性都转成reftoRef: toRef接收两个参数target和attrtarget是一般是reactive的响应式对象attr是对象的属性返回响应式变量采用引用的方式修改响应式数据会影响原始数据并且数据发生改变import {reactive,toRef} from vue
setup(){const obj reactive({ name: 姜无忧, age: 18 })const name toRef(obj, name) return {name }
}toRefs: 将响应式reactive对象转换为普通对象多用于响应式对象转为普通对象后解构对象中的数据依旧是响应式import {reactive,toRefs} from vue
setup(){const obj reactive({ name: 姜无忧, age: 18 })const {name,age} toRefs(obj) return {name,age }
}//或者
import {reactive,toRefs} from vue
setup(){const obj reactive({ name: 姜无忧, age: 18 })return {...toRefs(obj)}
}
