穿越yin线的做网站,网站商城系统建设方案,门户网站开发难点,千享科技网站建设假期第四篇#xff0c;对于基础的知识点#xff0c;我感觉自己还是很薄弱的。 趁着假期#xff0c;再去复习一遍 1、toRef与toRefs 创建一个ref对象#xff0c;其value值指向另一个对象中的某个属性 语法#xff1a;const name toRef#xff08;person,‘name’#xf…假期第四篇对于基础的知识点我感觉自己还是很薄弱的。 趁着假期再去复习一遍 1、toRef与toRefs 创建一个ref对象其value值指向另一个对象中的某个属性 语法const name toRefperson,‘name’ 应用要将响应式对象中的某个属性单独提供给外部使用时 扩展toRefs与toRef功能一致但可以批量创建多个ref对象语法toRefs(person) 示例当定义penson为响应式对象时再定义一个变量去接收对象中的某个值 const name1 person.name 这种方式name1不具有响应式 const name2 toRef(person,‘name’) 这种方式name2具有响应式
templatedivh2姓名{{ person.name }}/h2h2性别{{ person.sex }}/h2h2工作{{ person.job.job1.work }}/h2button clickperson.name ~姓名变了/buttonbr /button clickperson.sex 性别变了/buttonbr /button clickperson.job.job1.work 还有其他工作工作变了/button/div
/template
script
import { ref, reactive,toRef } from vue;
export default {name: demo,setup() {let person reactive({name: 莲花,sex: 男,job: {job1: {work: 侦探,},},});const name1 person.name;console.log(name1, name1);const name2 toRef(person,name)console.log(name2, name2);return {person,};},
};
/script
style scoped/style如果模板区想简化成这样
templatedivh2姓名{{ name }}/h2h2性别{{ sex }}/h2h2工作{{ work }}/h2button clickname ~姓名变了/buttonbr /button clicksex 性别变了/buttonbr /button clickwork 还有其他工作工作变了/button/div
/template
script 就要用到toRef
script
import { ref, reactive, toRef } from vue;
export default {name: demo,setup() {let person reactive({name: 莲花,sex: 男,job: {job1: {work: 侦探,},},});const name1 person.name;console.log(name1, name1);const name2 toRef(person, name);console.log(name2, name2);return {//toRef接收的第一个参数是对象第二个是属性键name: toRef(person, name),sex: toRef(person, sex),work: toRef(person.job.job1, work),};},
};
/scriptref直接使用似乎也能达到相似的效果但是可以替换为ref写法吗答案是不可以 如果替换为ref的写法只有在初始化的时候才会读取person中定义的属性之后修改person中的属性改的根本不是person中定义的属性而是return中新定义出来ref包裹的属性。
在模板区将person对象展示出来然后点击三个按钮,看下打印出来的结果 三个按钮随意点击页面已经变化了但是person对象还是原来的 再换成toRef person对象也一起发生了改变
toRef一次只能处理一个属性toRefs可以批量处理一个对象中的所有属性 …扩展运算符只能拿到第一层所以模板区的work从job开始往下点job.job1.work toRef的本质是引用保持住和源对象的连接关系维持通话进行一个桥接, toRef 创建的引用是对已有对象的属性的引用。因此在修改 toRef 返回的引用时会直接修改原始对象中的属性。
ref的本质是拷贝将对象中的属性读取出来打包成一个新的ref和原来的不再有连接关系。
ref 适用于创建可变的单个值的响应式数据而 toRef 用于获取已有响应式对象中特定属性的引用并关注该属性的变化。
