网站建设微信官网开发,沈阳论坛建站模板,用手机建网站,网页设计家乡南京1、ref: 对原始数据进行拷贝。当修改 ref 响应式数据的时候#xff0c;模版中引用 ref 响应式数据的视图处会发生改变#xff0c;但原始数据不会发生改变
templatediv{{refA}}/div
/templatescript langts setup
impor…1、ref: 对原始数据进行拷贝。当修改 ref 响应式数据的时候模版中引用 ref 响应式数据的视图处会发生改变但原始数据不会发生改变
templatediv{{refA}}/div
/templatescript langts setup
import { ref } from vuelet a 1
const refA ref(a) // 对原始数据 a 进行拷贝refA.value 12 // 此时模版视图引用 refA 的地方进行更新
console.log(a) // 此时原始数据 a 的值还是 1
/script2、toRef: 用于将对象中的某个属性转换成响应式数据。当修改 toRef 响应式数据的时候原始数据会发生变化但是模版中引用 toRef 响应式数据的视图处不会发生改变
templatediv{{toRefName}}/div
/templatescript langts setup
import { toRef } from vuelet obj { name: bobo, age: 18 }
const toRefName toRef(obj, name) // 将原始数据 obj 的 name 属性转换为响应式数据toRefName.value lili // 此时模版视图引用 toRefName 的地方不更新
console.log(toRefName.value, obj.name) // 都变成 lili
/script3、toRefs: 用于将整个对象转换成响应式数据。当修改 toRefs 响应式数据的时候原始数据会发生变化但是模版中引用 toRefs 响应式数据的视图处不会发生变化
templatediv{{toRefsObj.name}} ---- {{toRefsObj.age}}/div
/templatescript langts setup
import { toRefs } from vuelet obj { name: bobo, age: 18 }
const toRefsObj toRefs(obj) // 将原始数据 obj 所有属性转换为响应式数据toRefsObj.name.value lili // 此时模版视图引用 toRefsObj 属性的地方不更新
toRefsObj.age.value 16 // 此时模版视图引用 toRefsObj 属性的地方不更新
console.log(toRefsObj.name.value, obj.name) // 都变成 lili
console.log(toRefsObj.age.value, obj.age) // 都变成 16
/script
