Vue3_2024_3天【Vue3组合式API~响应式及toRefs】

news2024/11/15 10:55:28

第一：vue3 中可以两个script标签

第一个：声明组件名
第二个：setup语法糖（默认 lang语言是js语言，修改语言须保持一致）
若想去掉一个script标签（声明组件名称），则可使用插件！
使用步骤：
1.下载【npm i vite-plugin-vue-setup-extend -D】
2.vite.config.ts中引入插件配置，
3. 在组件script setup 后面，追加name即可，例如： <script lant=‘ts’ setup name=‘greg_01’ …

第二：Vue3组合式setup语法糖

1.概念

将属性、方法、计算属性、监听器（统称-组合式api）都写到setup中，，现比在vue2中直接使用原生setup函数，语法糖避免将属性、方法。。。return出去；

2.setup中数据的响应式（ref与reactive）

2.1 ref【基本数据类型和引用数据类型】

前面说过了，ref包裹的基本数据类型和引用数据类型的值，从而达到响应式效果；
（注意：ref在template可直接使用属性值，在js逻辑层面需要.value去拿，并且console打印被包裹类型为，，，ref(value:‘…’)）注：若怕使用rer包裹获取值，忘记.value，也可以使用volar插件自动添加.value（vscode插件），好处：系统帮你判断，帮你加上，同时自己别太依赖，自己要知道！

2.2 reactive【引用数据类型】

reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。【前面文章说过了，省略】

2.3 ref与reactive使用场景

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

第三：【toRefs 与 toRef】

作用：将一个响应式对象中的每一个属性，转换为ref对象。
备注：toRefs与toRef功能一致，但toRefs可以批量转换。【如下图代码】

图片代码：

<template>
  <div style="display: flex;justify-content: space-between;background-color: #eeeeee;">
    <div>火警求救电话：{{phone}}</div>
  <div>姓名：{{name}}</div>
  </div>
  <div>
    <div>时间：{{helpInfo.time}}</div>
    <div>地点：{{helpInfo.local}}</div>
    <div>被困人数：{{helpInfo.peopleNumber}}</div>
  </div>
</template>

<!--这个script的作用：单纯声明这个组件名字：name='Greg_03'、且默认lang='js'，若声明ts语言,则另一个标签于其对应!-->
<script lang="ts">
export default {
    name:'Greg_03',
}
</script>

<!--这个script的作用就是：vue3语法糖setup使用、且不要尝试与上面script标签合并成一个！-->
<script setup lang="ts">
import {reactive, toRef, toRefs} from 'vue';
let phone='119';
let name='少秋';

//直接在template上使用helpInfo响应式对象，
let helpInfo=reactive({id:'2223334444',time:'Sun Mar 03 2024 14:38:49 GMT+0800 (GMT+08:00)',local:'上海浦东世纪公园执法局二楼',peopleNumber:6});

//【（对象所有属性解构）直接从reactive响应式对象中解构】将reactive响应式对象，赋值给解构！（*何为~”解构赋值“，简单说是将原有对象里的数据拿出来，给到新的变量，并不会创建新对象---‘提取数据，赋值新变量’）
//1种：直接解构（不做任何处理）出来属性无法拥有响应式！
// let {time,local,peopleNumber}=helpInfo;//所以：这里左边解构，右边响应式对象，单纯从响应式对象中拿取数据，赋值给新变量，仅此而已！所以解构得原对象数据，得不到原对象的响应式效果！
//2种：将reactive响应式对象~~转成ref对象，然后达到解构出来属性也拥有响应式效果，
let {time,local,peopleNumber}=toRefs(helpInfo);//解构出来属性，拥有响应式，与helpInfo响应式对象逐个对应！（两个对象中，任何一方某个属性改变，另一个对象中属性随之改变）

//【（对象单个属性解构）】了解即可  （单个属性解构，其实可省略花括号）
let {id}=toRef(helpInfo,'id');//效果也是与响应式对象helpInfo里的id属性，互相关联，响应！

</script>


<style>

</style>