自学内容网 自学内容网
自学内容网 > 正文

Vue3 响应式数据

🕗 发布于 2024-10-12 06:12 javascript  前端  vue.js  

ref 基本数据类型响应式

  • 语法：let xxx = ref(初始值)。
  • **返回值：**一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
  • 注意点：
    • TS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
    • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。
<script lang="ts" setup name="Person">
import {ref} from 'vue';

// 数据 -- 此时不是响应式的
let name = ref('张三');
let age = ref(18);
let tel = '1234567890';

// 方法 -- 这样修改页面没有变化
function changName() {
  name.value = '李四';
}
function changeAge() {
  age.value = 20;
}

function showTel() {
  alert(tel);
}

reactive 对象类型的响应式数据

  • 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
  • 语法：let 响应式对象= reactive(源对象)。
  • **返回值：**一个Proxy的实例对象，简称：响应式对象。
  • 注意点：reactive定义的响应式数据是**“深层次”**的。
<template>
  <div class="person">
    <h1>Person</h1>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="changName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
    <h1>一辆小汽车</h1>
    <h3>品牌{{ car.brand }}</h3>
    <h3>价格{{ car.price }}</h3>
    <br>
    <button @click="changeCarPrice">修改价格</button>
    <br>
    <h1>游戏列表</h1>
    <ul>
      <li v-for="game in games" :key="game.name">
        <p>游戏名称: {{ game.name }}</p>
        <p>游戏价格: {{ game.price }}</p>
      </li>
    </ul>
    <button @click="changeFisrtGamePrice">修改第一个游戏价格</button>
  </div>
</template>

<!-- <script lang="ts">
export default {
  name: 'Person',
  // setup() {
  //     // 数据 -- 此时不是响应式的
  //     let name = '张三'; 
  //     let age = 18;
  //     let tel = '1234567890';

  //     // 方法 -- 这样修改页面没有变化
  //     function changName() {
  //         name = '李四';
  //     }
  //     function changeAge() {
  //         age = 20;
  //     }

  //     function showTel() {
  //         alert(tel);
  //     }
  //     return {a:name, b:age, changName, changeAge, showTel}
  // }
} -->
<!-- </script> -->

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

// 数据 -- 此时不是响应式的
let name = ref('张三');
let age = ref(18);
let tel = '1234567890';

let car = reactive({brand: 'BMW', price: 1000000});

let games = reactive([
  {name: 'LOL', price: 100},
  {name: 'DNF', price: 200},
  {name: 'CF', price: 300},
]);

// 方法 -- 这样修改页面没有变化
function changName() {
  name.value = '李四';
}
function changeAge() {
  age.value = 20;
}

function showTel() {
  alert(tel);
}
function changeCarPrice() {
  car.price += 10000;
}
function changeFisrtGamePrice() {
  games[0].price += 100;
}
</script>
<style>
.person {
  background-color: aqua;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

ref 再探

  • ref接收的数据可以是：基本类型、对象类型。
  • 若ref接收的是对象类型，内部调用了reactive函数。
<template>
  <div class="person">
    <h1>Person</h1>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="changName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
    <h1>一辆小汽车</h1>
    <h3>品牌{{ car.brand }}</h3>
    <h3>价格{{ car.price }}</h3>
    <br>
    <button @click="changeCarPrice">修改价格</button>
    <br>
    <h1>游戏列表</h1>
    <ul>
      <li v-for="game in games" :key="game.name">
        <p>游戏名称: {{ game.name }}</p>
        <p>游戏价格: {{ game.price }}</p>
      </li>
    </ul>
    <button @click="changeFisrtGamePrice">修改第一个游戏价格</button>
  </div>
</template>

<!-- <script lang="ts">
export default {
  name: 'Person',
  // setup() {
  //     // 数据 -- 此时不是响应式的
  //     let name = '张三'; 
  //     let age = 18;
  //     let tel = '1234567890';

  //     // 方法 -- 这样修改页面没有变化
  //     function changName() {
  //         name = '李四';
  //     }
  //     function changeAge() {
  //         age = 20;
  //     }

  //     function showTel() {
  //         alert(tel);
  //     }
  //     return {a:name, b:age, changName, changeAge, showTel}
  // }
} -->
<!-- </script> -->

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

// 数据 -- 此时不是响应式的
let name = ref('张三');
let age = ref(18);
let tel = '1234567890';

let car = ref({brand: 'BMW', price: 1000000});

let games = ref([
  {name: 'LOL', price: 100},
  {name: 'DNF', price: 200},
  {name: 'CF', price: 300},
]);

// 方法 -- 这样修改页面没有变化
function changName() {
  name.value = '李四';
}
function changeAge() {
  age.value = 20;
}

function showTel() {
  alert(tel);
}
function changeCarPrice() {
  car.value.price += 10000;
}
function changeFisrtGamePrice() {
  games.value[0].price += 100;
}
</script>
<style>
.person {
  background-color: aqua;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

宏观角度看：

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

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

  • 区别：
  1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
  2. reactive重新分配一个新对象，会失去响应式（可以使用**Object.assign**去整体替换）。
// reactive 
Object.assign(car, {brand:'dklsajf', price:333});

// ref
car.value = {brand:'3', price:3454};
  • 使用原则：
  1. 若需要一个基本类型的响应式数据，必须使用ref。
  2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
  3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

自动加value：

在这里插入图片描述

toRefs toRef

  • 作用：将一个响应式对象中的每一个属性，转换为**ref对象**。
  • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。
import {toRefs} from 'vue'
let person = {
name:'glm',
age:211
};
// 解构 toRefs
let {name, age} = toRefs(pesrson);

// 解构 toRef
let age = toRef(person. 'age');

原文地址：https://blog.csdn.net/qq_63432403/article/details/142864774

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024