陵水网站建设公司,网站建设飠金手指排名十一,网站开发的评论界面怎么写,应用商店免费下载一、情景说明
在Vue2中#xff0c;我们已经知道数据的响应式#xff0c;是什么含义 就是#xff0c;在data块中#xff0c;定义的变量#xff0c;在页面中引用后 任何地方修改了该变量#xff0c;页面中引用的变量会立即显示最新数值。
这块#xff0c;我们学习了 插值…一、情景说明
在Vue2中我们已经知道数据的响应式是什么含义 就是在data块中定义的变量在页面中引用后 任何地方修改了该变量页面中引用的变量会立即显示最新数值。
这块我们学习了 插值语法{{}} 单向绑定指令v-bind 双向绑定指令v-model
那么在Vue3中没有了data块如何实现数据的响应式了
二、响应式数据
Person.vue组件
templatediv classpersonh2姓名{{name}}/h2h2年龄{{age}}/h2h2地址{{address}}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickshowTel查看联系方式/button/div
/templatescript langts setup namePerson// 数据原来是写在data中的此时的name、age、tel都不是响应式的数据let name 张三let age 18let tel 13888888888let address 北京昌平区宏福苑·宏福科技园// 方法function changeName() {name zhang-san //注意这样修改name页面是没有变化的console.log(name) //name确实改了但name不是响应式的}function changeAge() {age 1 //注意这样修改age页面是没有变化的console.log(age) //age确实改了但age不是响应式的}function showTel() {alert(tel)}
/script1、ref实现基本类型的数据响应式
针对上面的组件我们想要实现name、age两个变量的数据响应式效果。 script引用函数
import {ref} from vue创建变量 let name ref(张三)let age ref(18)读取变量 h2姓名{{name}}/h2h2年龄{{age}}/h2修改变量 JS中操作ref创建的变量时候需要.value // 方法function changeName() {name.value zhang-san}function changeAge() {age.value 1 }2、ref实现对象类型的数据响应式
底层是reactive实现的功能 script引用函数
import {ref} from vue创建变量 let car ref({brand:奔驰,price:100})let games ref([{id:aysdytfsatr01,name:王者荣耀},{id:aysdytfsatr02,name:原神},{id:aysdytfsatr03,name:三国志}])读取变量 h2汽车信息一辆{{car.brand}}车价值{{car.price}}万/h2li v-forg in games :keyg.id{{g.name}}/li修改变量 JS中操作ref创建的变量时候需要.value function changePrice(){car.value.price 10console.log(car.value.price)}function changeFirstGame(){games.value[0].name 流星蝴蝶剑}3、reactive实现对象类型的数据响应式
script引用函数
import {reactive} from vue创建变量 创建了3个响应式对象数据 // 数据// 单个对象数据let car reactive({brand:奔驰,price:100})// 数组型对象let games reactive([{id:aysdytfsatr01,name:王者荣耀},{id:aysdytfsatr02,name:原神},{id:aysdytfsatr03,name:三国志}])// 多层次对象let obj reactive({a:{b:{c:666}}})读取变量 h2汽车信息一辆{{car.brand}}车价值{{car.price}}万/h2li v-forg in games :keyg.id{{g.name}}/lih2测试{{obj.a.b.c}}/h2修改变量 // 方法function changePrice(){car.price 10console.log(car.price)}function changeFirstGame(){games[0].name 流星蝴蝶剑}function changeObj(){obj.a.b.c 999}4、注意事项
reactive创建的对象变量被重新分配一个新对象时会失去响应式效果 ref创建的对象类型变量不存在这个问题。 问题重现 reactive定义一个对象类型的变量 let car reactive({brand:奔驰,price:100})需求 给car重新赋值一个对象 无效写法
car {brand:奥拓,price:1}
car reactive({brand:奥拓,price:1})有效写法
Object.assign(car,{brand:奥拓,price:1})三、对比
宏观角度看 ref用来定义基本类型数据、对象类型数据 reactive用来定义且只能定义对象类型数据。 区别 ref创建的变量必须使用.value可以使用volar插件自动添加.value。reactive重新分配一个新对象会失去响应式可以使用Object.assign去整体替换。 使用原则 若需要一个基本类型的响应式数据必须使用ref。若需要一个响应式对象层级不深ref、reactive都可以。若需要一个响应式对象且层级较深推荐使用reactive。
