创建响应式数据

创建响应式数据

Vue2中

​ 在vue2中数据写在对应的data中就是响应式的。

Vue3

ref ：可以定义基本类型的响应式数据

先要导入对应的ref，然后才能使用

import {ref} from 'vue'

​ 作用：定义响应式变量。

​ 语法：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">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script setup lang="ts" name="Person234">
  import {ref} from 'vue'

  //######  数据（原本写在data中）  ######
  let name = ref('张三');
  let age = ref(18);
  let tel = "18888888888";

  //######  方法（原本写在methods中） ######
  function changeName() {
    name.value = "李四";
    console.log(name.value);
  }

  function changeAge() {
    age.value += 1;
    console.log(age.value);
  }

  function showTel() {
    alert(tel);
  }
</script>

<style>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px; /* 盒子阴影 */
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

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

​ 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）

​ 语法：let 响应式对象= reactive(源对象)。

​ 返回值：一个Proxy的实例对象，简称：响应式对象。

​ 注意点：reactive定义的响应式数据是“深层次”的。

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

<script setup lang="ts" name="Person234">
  import {reactive} from 'vue'

  //###### 数据 ######
  let car = reactive({brand: '小米S7', price: 30});
  let games = reactive([  //数组也是属于对象范畴的
    {id: 1, name:'原神'},
    {id: 2, name:'CF'},
    {id: 3, name:'王者荣耀'}
  ])

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

  function changeFirstGame() {
    console.log(games);
    games[0].name = '三国志';
  }
</script>

<style>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px; /* 盒子阴影 */
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

ref：可以定义对应类型的响应式数据

​ 其实ref接收的数据可以是：基本类型、对象类型。

​ 若ref接收的是对象类型，内部其实也是调用了reactive函数。

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

<script setup lang="ts" name="Person">
  import {ref} from 'vue'

  //###### 数据 ######
  let car = ref({brand: '小米S7', price: 30});
  let games = ref([  //数组也是属于对象范畴的
    {id: 1, name:'原神'},
    {id: 2, name:'CF'},
    {id: 3, name:'王者荣耀'}
  ])

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

  function changeFirstGame() {
    console.log(games);
    games.value[0].name = '三国志';
  }
</script>

<style>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px; /* 盒子阴影 */
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

ref 对比 reactive

宏观角度看：

1. ref用来定义：基本类型数据、对象类型数据；

2. reactive用来定义：对象类型数据。

• 区别：

1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。

   

2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。(具体参考vue文档reactive的局限性)

• 使用原则：

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

参考代码：

<template>
  <div class="person">
    <h2>一辆{{car.brand}}, 价值{{car.price}}</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <button @click="changeCar">修改汽车</button>
    <hr>
    <h2>当前求和位: {{sum}}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import {reactive, ref} from 'vue'

  //###### 数据 ######
  let car = reactive({brand: '小米S7', price: 30});
  let sum = ref(0)

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

  function changeSum() {
    sum.value += 1;
    console.log(sum.value);
  }

  function changeCar() {
    // car = {brand: '马自达', price: 20};            //无效，修改了原本的整个对象
    // car = reactive({brand: '马自达', price: 20});  //无效，如果重新reactive 其实已经断开了最开始的设置
    Object.assign(car, {brand: '马自达', price: 20}); //有效
  }
</script>

<style>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px; /* 盒子阴影 */
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>