【Vue3之响应式数据（三）】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

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

作用：定义响应式变量
语法：let xxx = ref(初始值）
返回值：一个RefImpl的实例对象，简称ref对象或ref,ref对象的value属性是响应式的
【注意：】

• JS中操作数据需要：xxx.value,但模版中不需要.value，直接使用即可
• 对于let name = ref('sun')来说，name不是响应式的，name.value是响应式的

先在setup里引入ref,import {ref} from 'vue',随后在需要响应的地方let xxx = ref(初始值）

二、reactive只能定义对象类型的响应式数据

reactive也可以深层次响应，数组也包括在对象内

每点击一次修改价值便增加10万，把第一个游戏名字修改为蛋仔，把测试值修改为999（深层次）

代码如下：

<template>
  <div class="person">
      <h2>一辆{{car.brand}}车，价值{{car.price}}万</h2>
      <button @click="changePrice">修改价值</button>
    <br>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id" >{{g.name}}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏名字</button>
    <hr>
    <h2>测试：{{obj.a.b.c}}</h2>
    <button @click="changeObj">测试</button>
  </div>
</template>


<script lang="ts" setup name="Person">
  import {reactive} from 'vue'
  // 数据
  let car = reactive({brand:'奔驰',price:100})
  let games = reactive([
    {id:'games01',name:'王者'},
    {id:'games02',name:'原神'},
    {id:'games03',name:'蛋仔'},
  ])

  console.log(car)
  let obj=reactive({
    a:{
      b:{
        c:666
      }
    }
  })


  //方法
  function changePrice(){
    car.price += 10
    console.log(car.price)


  }
  function changeFirstGame(){
    games[0].name = '追光'
    // console.log(games[0])
  }
  function changeObj(){
    obj.a.b.c=999
  }
</script>

<style>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

}
button{
  margin:0 5px;
}
li{

}

</style>

三、ref定义对象类型的响应式数据

代码如下：

<template>
  <div class="person">
      <h2>一辆{{car.brand}}车，价值{{car.price}}万</h2>
      <button @click="changePrice">修改价值</button>
    <br>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id" >{{g.name}}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏名字</button>

  </div>
</template>


<script lang="ts" setup name="Person">
import {reactive, ref} from 'vue'
  // 数据
  let car = ref({brand:'奔驰',price:100})
  let games = ref([
    {id:'games01',name:'王者'},
    {id:'games02',name:'原神'},
    {id:'games03',name:'蛋仔'},
  ])
  let obj = reactive({x:999})

  console.log(car)
  console.log(obj)

  //方法
  function changePrice(){
    car.value.price += 10
    console.log(car.value.price)


  }
  function changeFirstGame(){
    games.value[0].name = '追光'
    // console.log(games[0])
  }

</script>

<style>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

}
button{
  margin:0 5px;
}
li{

}

</style>

四、整体替换的实现

修改品牌，修改价值，修改车信息包含了品牌和价值

用reactive修改

<template>
  <div class="person">
      <h2>一辆{{car.brand}}车，价值{{car.price}}万</h2>
      <button @click="changeBrand">修改品牌</button>
      <button @click="changePrice">修改价值</button>
      <button @click="changeCar">修改车信息</button>
      <hr>
      <h2>当前和为{{sum}}</h2>
      <button @click="changeSum">点我sum+1</button>

  </div>
</template>


<script lang="ts" setup name="Person">
import {reactive, ref} from 'vue'
  // 数据
  let car = reactive({brand:'奔驰',price:100})
  let sum =ref(0)

  console.log(car)


  //方法
  function changeBrand(){
   car.brand='宝马'
  }
  function changePrice(){
    car.price += 10
  }
  function changeCar(){
      // car = {brand: '雅迪',price: 1}    // 创建了个新对象，页面不更新
    // car = reactive({barnd:'雅迪',price: 1})   // 把原本的reactive拦截了页面不更新
    Object.assign(car,{brand:'雅迪',price: 1})  //页面更新
  }
  function changeSum(){
    sum.value += 1
  }


</script>

<style>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

}
button{
  margin:0 5px;
}
li{

}

</style>

用ref修改

总结

ref对比reactive
1.ref用来定义：基本类型数据，对象类型数据
2.reactive用来定义：对象类型数据
区别
1. ref 创建的变量必须使用 .value（可以使用volar插件自动添加.value）
2. reactive 重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）
使用原则
1. 若需要一个基本类型的响应式数据，必须使用ref
2. 若需要一个响应式对象，层级不深，ref、reactive都可以
3. 若需要一个响应式对象，层架较深，推荐使用reactive