【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>
  div class="person">
    h2>姓名：{{name}}h2>
    h2>年龄：{{age}}h2>
    button @click="changeName">修改名字button>
    button @click="changeAge">年龄 +1button>
    button @click="showTel">点我查看联系方式button>
  div>
template>

script setup lang="ts" name="Person">
  import {ref} from 'vue'
  
  let name = ref('张三')
  let age = ref(18)
  
  let tel = '13888888888'

  function changeName(){
    
    name.value = '李四'
    console.log(name.value)

    
    
  }
  function changeAge(){
    
    age.value += 1 
    console.log(age.value)
  }
  function showTel(){
    alert(tel)
  }
script>

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

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

template>
  div class="person">
    h2>汽车信息：一台 {{car.brand}} 汽车，价值 {{car.price}} 万h2>
    h2>游戏列表：h2>
    ul>
      li v-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>

script lang="ts" setup name="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
      }
    }
  }
})

function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
script>

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

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

script lang="ts" setup name="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>
    div class="person">
        h3>汽车信息：一辆 {{car.brand}} 品牌的汽车，价格{{car.price}} 万元h3>
        button @click="changePrice">修改汽车价格button>
        br/>
        h3>游戏信息：h3>
        ul>
            li v-for="g  in games" :key="g.id">
                    {{g.name}}
            li>
        ul>
        button @click="changeFirstGameName">修改以第一个游戏的名字button>
    div>
template>

script lang="ts" setup name="Person">

import {ref} from 'vue' 
    let car =ref({
        brand:"奔驰",
        price:100
    });

    let games =ref([
        {id:'afdsafwefa01',name:'王哲荣耀'},
        {id:'afdsafwefa02',name:'原生'},
        {id:'afdsafwefa03',name:'土豆'}
        ])

        function changePrice(){
        car.value.price +=10;
        console.log(car.value.price);
    }

    function changeFirstGameName(){
        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>