高新营销型网站建设公司,pc网站做移动适配,网站建设找哪一家好,赣州网站建设哪家公司好ref 创建#xff1a;基本类型的响应式数据
作用#xff1a;定义响应式变量。 语法#xff1a;let xxx ref(初始值)。 返回值#xff1a;一个RefImpl的实例对象#xff0c;简称ref对象或ref#xff0c;ref对象的value属性是响应式的。 注意点#xff1a; JS中操作数据…ref 创建基本类型的响应式数据
作用定义响应式变量。 语法let xxx ref(初始值)。 返回值一个RefImpl的实例对象简称ref对象或refref对象的value属性是响应式的。 注意点 JS中操作数据需要xxx.value但模板中不需要.value直接使用即可。 对于let name ref(张三)来说name不是响应式的name.value是响应式的。
templatediv classpersonh2姓名{{name}}/h2h2年龄{{age}}/h2button clickchangeName修改名字/buttonbutton clickchangeAge年龄1/buttonbutton clickshowTel点我查看联系方式/button/div
/templatescript setup langts namePersonimport {ref} from vue// name和age是一个RefImpl的实例对象简称ref对象它们的value属性是响应式的。let name ref(张三)let age ref(18)// tel就是一个普通的字符串不是响应式的let tel 13888888888function changeName(){// JS中操作ref对象时候需要.valuename.value 李四console.log(name.value)// 注意name不是响应式的name.value是响应式的所以如下代码并不会引起页面的更新。// name ref(zhang-san)}function changeAge(){// JS中操作ref对象时候需要.valueage.value 1 console.log(age.value)}function showTel(){alert(tel)}
/script
reactive 创建对象类型的响应式数据 作用定义一个响应式对象基本类型不要用它要用ref否则报错 语法let 响应式对象 reactive(源对象)。 返回值一个Proxy的实例对象简称响应式对象。 注意点reactive定义的响应式数据是“深层次”的。
templatediv classpersonh2汽车信息一台{{ car.brand }}汽车价值{{ car.price }}万/h2h2游戏列表/h2ulli v-forg in games :keyg.id{{ g.name }}/li/ulh2测试{{obj.a.b.c.d}}/h2button clickchangeCarPrice修改汽车价格/buttonbutton clickchangeFirstGame修改第一游戏/buttonbutton clicktest测试/button/div
/templatescript langts setup namePerson
import { reactive } from vue// 数据
let car reactive({ brand: 奔驰, price: 100 })
let games reactive([{ id: ahsgdyfa01, name: 英雄联盟 },{ id: ahsgdyfa02, name: 王者荣耀 },{ id: ahsgdyfa03, name: 原神 }
])
let obj reactive({a:{b:{c:{d:666}}}
})function changeCarPrice() {car.price 10
}
function changeFirstGame() {games[0].name 流星蝴蝶剑
}
function test(){obj.a.b.c.d 999
}
/script
ref 创建对象类型的响应式数据 其实ref接收的数据可以是基本类型、对象类型。 若ref接收的是对象类型内部其实也是调用了reactive函数。
templatediv classpersonh2汽车信息一台{{ car.brand }}汽车价值{{ car.price }}万/h2h2游戏列表/h2ulli v-forg in games :keyg.id{{ g.name }}/li/ulh2测试{{obj.a.b.c.d}}/h2button clickchangeCarPrice修改汽车价格/buttonbutton clickchangeFirstGame修改第一游戏/buttonbutton clicktest测试/button/div
/templatescript langts setup namePerson
import { ref } from vue// 数据
let car ref({ brand: 奔驰, price: 100 })
let games ref([{ id: ahsgdyfa01, name: 英雄联盟 },{ id: ahsgdyfa02, name: 王者荣耀 },{ id: ahsgdyfa03, name: 原神 }
])
let obj ref({a:{b:{c:{d:666}}}
})console.log(car)function changeCarPrice() {car.value.price 10
}
function changeFirstGame() {games.value[0].name 流星蝴蝶剑
}
function test(){obj.value.a.b.c.d 999
}
/script
ref 对比 reactive
宏观角度看 ref用来定义基本类型数据、对象类型数据 reactive用来定义对象类型数据。 区别 ref创建的变量必须使用.value可以使用volar插件自动添加.value。 reactive重新分配一个新对象会失去响应式可以使用Object.assign去整体替换。 使用原则 若需要一个基本类型的响应式数据必须使用ref。 若需要一个响应式对象层级不深ref、reactive都可以。 若需要一个响应式对象且层级较深推荐使用reactive。 toRefs 与 toRef 作用将一个响应式对象中的每一个属性转换为ref对象。 备注toRefs与toRef功能一致但toRefs可以批量转换。 语法如下
templatediv classpersonh2姓名{{person.name}}/h2h2年龄{{person.age}}/h2h2性别{{person.gender}}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangeGender修改性别/button/div
/templatescript langts setup namePersonimport {ref,reactive,toRefs,toRef} from vue// 数据let person reactive({name:张三, age:18, gender:男})// 通过toRefs将person对象中的n个属性批量取出且依然保持响应式的能力let {name,gender} toRefs(person)// 通过toRef将person对象中的gender属性取出且依然保持响应式的能力let age toRef(person,age)// 方法function changeName(){name.value ~}function changeAge(){age.value 1}function changeGender(){gender.value 女}
/script
