手机网站主页,woshop商城源码,南昌建设人才网站,网页设计与制作用什么软件文章目录 一、reactive()二、readonly()三、shallowReactive()四、shallowReadonly()五、isReactive() 和 isReadonly()六、toRef()七、toRefs()八、toRaw()九、ref、toRef、toRefs 异同点 一、reactive()
reactive() 函数用于返回一个对象的响应式代理。与 ref() 函数定义响应… 文章目录 一、reactive()二、readonly()三、shallowReactive()四、shallowReadonly()五、isReactive() 和 isReadonly()六、toRef()七、toRefs()八、toRaw()九、ref、toRef、toRefs 异同点 一、reactive()
reactive() 函数用于返回一个对象的响应式代理。与 ref() 函数定义响应式数据的异同点如下
数字化管理平台 Vue3ViteVueRouterPiniaAxiosElementPlus 权限系统-商城 个人博客地址 ref 函数和 reactive 函数都是用来定义响应式数据的。 ref 函数更适合定义基本数据类型可接收基本数据类型和对象 函数参数可以是基本数据类型也可以接受对象类型 如果参数是对象类型时其实底层的本质还是 reactive系统会自动给 ref 传入的值进行转换 ref(1) - reactive({value:1})
// ref函数只能操作浅层次的数据把基本数据类型当作自己的属性值深层次依赖于reactive在 template 中访问系统会自动添加 .value 。在 js 中需要手动 .value 进行访问 import { ref } from vue// 为基本数据类型添加响应式状态
const name ref(Neo)// 为复杂数据类型添加响应式状态
const state ref({count: 0
})// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)ref 响应式原理是依赖于Object.defineProperty()的get()和set()的 reactive 函数更适合定义复杂的数据类型json/arr/obj/map/set 它的响应式是更加‘深层次’的会影响对象内部所有嵌套的属性所有的数据都是响应式的底层本质是将传入的数据包装成一个 JavaScript Proxy其行为表现与一般对象相似。不同之处在于 Vue 能够跟踪对响应式对象属性的访问与更改操作。因此不等于源对象建议只使用响应式代理避免使用原始对象。 import { reactive } from vuelet list reactive([])
const addData () {setTimeout(() {let arr [banana,orange,peal]list.push(...arr)console.log(list)},1000)
}参数必须是对象或者数组如果要让对象的某个元素实现响应式时比较麻烦。需要使用 toRefs 函数处理 import { reactive, toRefs } from vue// 通过 reactive 定义响应式数据
const state reactive({// 定义每一个表单控件的配置项type类型、label文本、prop绑定字段 等信息items: [{label: 用户名,prop: name,inputwidth: 100%,}, {password: true,label: 密码,prop: pwd,inputwidth: 100%,rules: [{ required: true, message: 请输入密码, trigger: blur }]}, {label: 手机号,prop: phone,inputwidth: 100%,required: true,validateType: phone}],// 定义每一个表单绑定字段对应的信息form表单数据信息formData: {name: ,pwd: ,phone: },// form 元素配置信息options: {size: small,formWidth: 35%,//表单占父元素的宽度labelWidth: 80px,//标签的长度},
})// 通过 toRefs 获取 reactive 中的每一项属性的引用js中调用使用 .valuetemplate 中直接使用自动解析
const { items, formData, options } toRefs(state);console.log(items,options)获取数据值的时候直接获取不需要加.value import { reactive } from vue// 响应式状态
const state reactive({count: 0
})// 打印count的值
console.log(state.count)二、readonly()
readonly() 函数接受一个对象 (不论是响应式还是普通的) 或是一个 ref返回一个原值的只读代理。本身不能去修改值但受原始对象改变的影响。
import { readonly } from vuelet obj reactive({name:Jack})let readObj readonly(obj)const change () {// 不能直接修改只读属性// readObj.name Lucy;// 受原始对象改变的影响obj.name David;console.log(obj,readObj);
}只读代理是深层的对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同但解包得到的值是只读的。 三、shallowReactive()
reactive() 的浅层作用形式。和 reactive() 不同这里没有深层级的转换一个浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露这也意味着值为 ref 的属性不会被自动解包了。
import { reactive,shallowReactive } from vue;const stu reactive({name:Jack})const obj shallowReactive({foo:{bar:{num:1}}
})const change () {// reactive() 作用是深层次的和shallowReactive() 一起使用时会影响其数据变化stu.name David// shallowReactive() 作用是浅层的只能修改第一层的数据。深层次数据无法修改。但是会受reactive数据修改的影响。obj.foo.bar.num 1000;console.log(obj)
}四、shallowReadonly()
readonly() 的浅层作用形式。和 readonly() 不同这里没有深层级的转换只有根层级的属性变为了只读。属性的值都会被原样存储和暴露这也意味着值为 ref 的属性不会被自动解包了。同样会受原始对象数据改变的影响。
const state shallowReadonly({foo: 1,nested: {bar: 2}
})// 更改状态自身的属性会失败
state.foo// ...但可以更改下层嵌套对象
isReadonly(state.nested) // false// 这是可以通过的
state.nested.bar五、isReactive() 和 isReadonly()
isReactive() 函数检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。isReadonly() 函数检查传入的值是否为只读对象。只读对象的属性可以更改但他们不能通过传入的对象直接赋值。
数字化管理平台 Vue3ViteVueRouterPiniaAxiosElementPlus 权限系统-商城 个人博客地址
六、toRef()
toRef() 函数基于响应式对象上的一个属性创建一个对应的 ref。这样创建的 ref 与其源属性保持同步改变源属性的值将更新 ref 的值反之亦然。
toRef() 函数一次仅能设置一个数据接收两个参数第一个参数是哪个对象第二个参数是对象的哪个属性。
script setupconst state reactive({title: 标题,name: wff})const name toRef(state, name)console.log(state.name)console.log(name.value)
/scripttemplatedivname:{{name}}/div
/template七、toRefs()
toRefs() 函数将一个响应式对象转换为一个普通对象这个普通对象的每个属性都是指向源对象相应属性的 ref。
script setupconst state reactive({title: 标题,name: wff})const { title } toRefs(state)console.log(state.title)console.log(title.value)
/scripttemplatedivtitle:{{title}}/div
/template注我们使用 reactive创建的对象如果想在模板中使用就必须得使用 xxx.xxx的形式如果大量用到的话还是很麻烦的但是使用 es6解构以后会失去响应式。那么toRefs的作用就体现在这利用toRefs可以将一个响应式 reactive 对象的所有原始属性转换为响应式的ref属性。 八、toRaw()
toRaw() 函数可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象将响应式对象转化为普通对象。
这是一个可以用于临时读取而不引起代理访问/跟踪开销或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用请谨慎使用。
const foo {}
const reactiveFoo reactive(foo)console.log(toRaw(reactiveFoo) foo) // true九、ref、toRef、toRefs 异同点 ref、toRef、toRefs 函数都可以将某个对象中的属性变成响应式数据 ref 函数的本质是拷贝修改响应式数据不会影响到原始数据引用数据类型会有影响视图会更新 toRef、toRefs 函数和传入的数据形成引用关系修改 toRef 会影响这些数据但是不会更新视图 作用把一个响应式对象转换成普通对象该普通对象的每个属性都是一个 ref toRef 函数一次仅能设置一个数据接收两个参数第一个参数是哪个对象第二个参数是对象的哪个属性toRefs 函数接收一个对象作为参数它会遍历对象身上的所有属性然后挨个调用 toRef 执行。用于批量设置多个数据为响应式 ref 数据会引起监听行为而 toRef 不会
