行业类网站应如何建设,代码自动生成器,新闻营销的优势,月坛网站建设公司学习要点#xff1a; 1.toRef 和 toRefs 本节课我们来要了解一下 Vue3.x 中的 ref 两个周边 API 的用法#xff1b; 一#xff0e;toRef 和 toRefs 1. toRef 可以将源响应式对象上的 property 创建一个 ref 对象#xff1b; const obj reactive({ name : Mr.Lee, age : 10…学习要点 1.toRef 和 toRefs 本节课我们来要了解一下 Vue3.x 中的 ref 两个周边 API 的用法 一toRef 和 toRefs 1. toRef 可以将源响应式对象上的 property 创建一个 ref 对象 const obj reactive({ name : Mr.Lee, age : 100 }) // ref 和 toRef 都是给一个静态数据实行响应式转换成 ref 对象 // ref 是复制操作和之前的对象断了关联 // toRef 是引用操作当修改数据时原数据也会被修改 const nameRef ref(obj.name) const nameToRef toRef(obj, name) console.log(nameRef) console.log(nameToRef) nameRef.value Mr.Wang nameToRef.value Mr.Wang console.log(obj.name) PS手册上使用的 prop 传递因为我们还没有学 setup(prop)我们换个例子 const obj reactive({ name : Mr.Lee, age : 100 }) const info { // 响应式操作使用 ref()则无法获取原数据的修改信息 name : toRef(obj, name) } setTimeout(() { // 由于使用了 toRef原数据修改后这里会更新到最新数据 console.log(info.name.value) }, 1000) // 修改原数据关联被 toRef 的数据 obj.name Mr.Wang 2. toRefs 会将原来响应式对象转换为普通对象并将内部所有 property 都 ref 3. 比如我们要把一个函数里响应式对象里的 property 解构出来时还保持响应式 const userF () { const state reactive({ foo : 1, bar : 2 }) return toRefs(state) } const { foo, bar } userF() console.log(foo) console.log(bar)
