【Vue】Vue（八）Vue3.0 使用ref 和 reactive创建响应式数据

ref 创建：基本类型的响应式数据

• 作用：定义响应式变量。
• 语法：let xxx = ref(初始值)。
• 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
• 注意点：- JS中操作数据需要：xxx.value，但模板中不需要.value`，直接使用即可。- 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

<template><divclass="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button@click="changeName">修改名字</button><button@click="changeAge">年龄+1</button><button@click="showTel">点我查看联系方式</button></div></template><scriptsetuplang="ts"name="Person">import{ref}from'vue'// name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。let name =ref('张三')let age =ref(18)// tel就是一个普通的字符串，不是响应式的let tel ='13888888888'functionchangeName(){// JS中操作ref对象时候需要.value
    name.value ='李四'
    console.log(name.value)// 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。// name = ref('zhang-san')}functionchangeAge(){// JS中操作ref对象时候需要.value
    age.value +=1 
    console.log(age.value)}functionshowTel(){alert(tel)}</script>

reactive 创建：对象类型的响应式数据

• 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
• 语法：let 响应式对象= reactive(源对象)。
• 返回值：一个Proxy的实例对象，简称：响应式对象。
• 注意点：reactive定义的响应式数据是“深层次”的。

<template><divclass="person"><h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2><h2>游戏列表：</h2><ul><liv-for="g in games":key="g.id">{{ g.name }}</li></ul><h2>测试：{{obj.a.b.c.d}}</h2><button@click="changeCarPrice">修改汽车价格</button><button@click="changeFirstGame">修改第一游戏</button><button@click="test">测试</button></div></template><scriptlang="ts"setupname="Person">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}}}})functionchangeCarPrice(){
  car.price +=10}functionchangeFirstGame(){
  games[0].name ='流星蝴蝶剑'}functiontest(){
  obj.a.b.c.d =999}</script>

ref 创建：对象类型的响应式数据

• 其实ref接收的数据可以是：基本类型、对象类型。
• 若ref接收的是对象类型，内部其实也是调用了reactive函数。 为什么这样说呢 ？我们输出一下reactive类型和ref类型的数据

<scriptlang="ts"setupname="Person">import{ reactive, ref }from'vue'let car =ref({
    brand:"奔驰",
    price:100});let test =reactive({ name:'张三'})

console.log(car, car);
console.log(test, test);</script>

reactive类型的响应对象

ref类型的响应对象（普通数据类型）

ref类型的响应对象（对象数据类型）
从下图中可以看出，使用ref创建响应对象的value中又包含了一层被reactive处理过的内容；

<template><divclass="person"><h3>汽车信息：一辆{{car.brand}}品牌的汽车，价格{{car.price}} 万元</h3><button@click="changePrice">修改汽车价格</button><br/><h3>游戏信息：</h3><ul><liv-for="g  in games":key="g.id">
                    {{g.name}}
            </li></ul><button@click="changeFirstGameName">修改以第一个游戏的名字</button></div></template><scriptlang="ts"setupname="Person">import{ref}from'vue'let car =ref({
        brand:"奔驰",
        price:100});let games =ref([{id:'afdsafwefa01',name:'王哲荣耀'},{id:'afdsafwefa02',name:'原生'},{id:'afdsafwefa03',name:'土豆'}])functionchangePrice(){
        car.value.price +=10;
        console.log(car.value.price);}functionchangeFirstGameName(){
        games.value[0].name='流星雨蝴蝶';}</script><style>.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}li{font: 1em sans-serif;}</style>