Web前端开发篇（2）：vue3中ref与reactive创建响应式数据

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

使用ref将基本类型的数据变成一个RefImpl的实例对象，对象的value属性即为具体数值，函数修改时需要修改value属性，但是在模板中直接使用，不需要value：

<template>
  <h1 class="home">首页</h1>
  // 基本数据类型
  <p>{{name}}</p>
  <p>{{age}}</p>
  <button @click="addAge">增加年龄</button>
</template>

<script setup lang="ts">
  import {ref} from "vue";

  let name = ref("张三")
  let age = ref(18)

  function addAge(){
    age.value += 1
  }
</script>

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

 ref既可以定义基础类型的数据，也可以定义对象类型的响应式数据，但是都必须加上.value：

<template>
  <h1 class="home">首页</h1>
  <p>我喜欢开{{car.name}}</p>
  <button @click="changeCar">修改汽车</button>
</template>

<script setup lang="ts">
  import {ref} from "vue";

  // 数据
  let car = ref({name: "AuDi", price: 1000000})
  // 方法
  function changeCar(){
    car.value.name = car.value.name === "AuDi" ? "YaDi" : "AuDi"
  }
</script>

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

使用reactive将对象类型数据变成一个Proxy的实例对象，将其变成响应式数据，其实不仅仅是对象类型，数组、集合等类型均可：

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

<template>
  <h1 class="home">首页</h1>
  // 对象数据类型
  <p>我喜欢开{{car.name}}</p>
  <button @click="changeCar">修改汽车</button>
  <hr>
  <h3>我喜欢的游戏：</h3>
  // 数组数据类型
  <ul>
    <li v-for="item in games" :key="item.id">{{item.name}}</li>
  </ul>
  <button @click="changeFirstGame">改变第一个游戏</button>
  <hr>
</template>

<script setup lang="ts">
  import {ref} from "vue";
  import {reactive} from "vue";

  // 数据
  let car = reactive({name: "AuDi", price: 1000000})
  let games = reactive([
    {id: "001", name: "英雄联盟"},
    {id: "002", name: "穿越火线"},
    {id: "003", name: "洛克王国"}
  ])
  // 方法
  function changeCar(){
    car.name = car.name === "AuDi" ? "YaDi" : "AuDi"
  }
  function changeFirstGame(){
    games[0].name = "LOL"
  }
</script>

4 ref与reactive 

当修改使用reactive创建的对象属性时，如果只修改对象的某个属性，则不会出现问题。如果修改整个对象比如：

  function changeCar(){
    car = {name: "YaDi", price: 1000}
  }

  function changeCar(){
    car = reactive({name: "YaDi", price: 1000})
  }

 上面两种写法均无法修改数据，页面不会更新，数据失去了响应式。正确修改方式：

<template>
  <h1 class="home">首页</h1>
  <p>我喜欢开{{car.name}}，价值{{car.price}}元</p>
  <button @click="changeCar">修改汽车</button>
</template>

<script setup lang="ts">
  import {reactive} from "vue";

  // 数据
  let car = reactive({name: "AuDi", price: 1000000})
  // 方法
  function changeCar(){
    Object.assign(car, {name: "YaDi", price: 1000})
  }
</script>

但是，使用ref创建的对象可以直接修改：

<template>
  <h1 class="home">首页</h1>
  <p>我喜欢开{{car.name}}，价值{{car.price}}元</p>
  <button @click="changeCar">修改汽车</button>
</template>

<script setup lang="ts">
  import {ref} from "vue";

  // 数据
  let car = ref({name: "AuDi", price: 1000000})
  // 方法
  function changeCar(){
    car.value = {name: "YaDi", price: 1000}
  }
</script>

 使用原则：

• 若需要一个基本数类型的响应式数据，必须用ref
• 若需要一个响应式对象，层级不深，ref、reactive都可以
• 若需要一个响应式对象，层级较深，推荐使用reactive

5 toRefs与toRef

toRefs可以用来将对象类型数据解构，解构后的数据也是响应式数据：

注：原对象的数据也会跟随结构的数据的改变而改变！！！

<template>
  <h1 class="home">首页</h1>
  <p>{{name}}</p>
  <p>{{price}}</p>
  <button @click="changeCarName">修改车名</button>
  <button @click="changeCarPrice">修改价格</button>

</template>

<script setup lang="ts">
  import {reactive, toRefs} from "vue";

  // 数据
  let car = reactive({name: "AuDi", price: 1000000})
  let {name,price} = toRefs(car)
  // 方法
  function changeCarName(){
    name.value = "YaDi"
  }
  function changeCarPrice(){
    price.value = 1000
  }
</script>

toRef的解构方式：

  let car = reactive({name: "AuDi", price: 1000000})
  let carName = toRef(car, 'name')
  let carPrice = toRef(car, 'price')

6 小贴士： 

条件渲染的两种方式v-if和v-show的对比，两种方式实现的效果相同，但是渲染原理不同：

v-if：指令用于条件性地渲染一个元素。如果条件为真，元素将会被渲染到 DOM 中；如果条件为假，元素将不会被渲染。

v-show：它与v-if不同，在渲染时不管条件为真还是为假，都会渲染。但是会根据条件真假去决定显示还是隐藏。

v-if具有更高的切换开销，v-show具有更高的初始渲染开销。v-if 适用于条件不经常改变的场景，切换条件时的开销较大，因为需要重新渲染元素。v-show适用于条件经常改变的场景，切换条件时的开销较小，因为只是改变样式属性。