快捷導(dǎo)航

Vue3中響應(yīng)式解構(gòu)props的使用

更新時(shí)間：2023年11月24日 09:06:00 作者：下雪天的夏風(fēng)

本文主要介紹了Vue3中響應(yīng)式解構(gòu)props的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1，前言

Vue3 中為了保持響應(yīng)性，始終需要以 props.x 的方式訪問(wèn)這些 prop。這意味著不能夠解構(gòu) defineProps 的返回值，因?yàn)榈玫降淖兞繉⒉皇琼憫?yīng)式的、也不會(huì)更新。

以下面的父子組件為例：

父組件

<template>
  <Children :count="count" />
</template>

<script setup>
import { ref, reactive } from "vue";
import Children from "./components/Children.vue";
const count = ref(0);
</script>

子組件

<template>
  <div>{{ count }}</div>
</template>

<script setup>
const props = defineProps({
  count: Number,
});

let { count } = props;
count++;
console.log(props.count); // 0，并不會(huì)發(fā)生變化 
</script>

2，解決

2.1，利用插件，實(shí)現(xiàn)編譯時(shí)轉(zhuǎn)換

原本 Vue3 是支持的 reactivity-transform，后來(lái)廢棄了。但是可以通過(guò) Vue Macros 插件來(lái)實(shí)現(xiàn)，用法如下：

1，安裝插件，并在 vite 中配置。

npm i -D @vue-macros/reactivity-transform

// vite.config.js
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

export default defineConfig({
  plugins: [ReactivityTransform()],
})

2，會(huì)在組件中自動(dòng)生效。

<template>
  <div>{{ msg }}</div>
  <div>{{ count }}</div>
</template>

<script setup>
import { watchEffect } from "vue";
const { msg, count } = defineProps({
  msg: String,
  count: Number,
});

watchEffect(() => {
  // 會(huì)在 props 變化時(shí)打印
  console.log(msg, count);
});
</script>

3，原理

先通過(guò) vite-plugin-inspect 插件來(lái)查看插件的中間狀態(tài)。

npm i -D vite-plugin-inspect

完整配置

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import ReactivityTransform from "@vue-macros/reactivity-transform/vite";
import Inspect from "vite-plugin-inspect";

export default defineConfig({
  plugins: [vue(), ReactivityTransform(), Inspect()],
});

本地啟動(dòng)后，訪問(wèn) http://localhost:5173/__inspect/ 可檢查項(xiàng)目的模塊和棧信息。

在這里插入圖片描述

可以看到是做了轉(zhuǎn)換，通過(guò) __props 來(lái)訪問(wèn)自然是響應(yīng)式的。

watchEffect(() => {
  console.log(msg, count);
});

watchEffect(() => {
  console.log(__props.msg, __props.count);
});

問(wèn)題來(lái)了，這個(gè) __props 是什么？

我們?cè)倏聪?nbsp;@vitejs/plugin-vue 這個(gè)插件的做了什么：會(huì)發(fā)現(xiàn)編譯單文件組件后，setup 變?yōu)楹瘮?shù)，其中一個(gè)參數(shù)就是 __props ，也就是傳入的 props。

在這里插入圖片描述

所以，我們?cè)?vue 單文件中，也可以直接使用 __props 并不會(huì)報(bào)錯(cuò)。

2.2，toRef 和 toRefs

toRef，基于響應(yīng)式對(duì)象上的一個(gè)屬性，創(chuàng)建一個(gè)對(duì)應(yīng)的 ref，這個(gè) ref 與其源屬性保持同步：改變?cè)磳傩缘闹祵⒏?ref 的值。

toRefs，將一個(gè)響應(yīng)式對(duì)象轉(zhuǎn)換為一個(gè)普通對(duì)象，這個(gè)普通對(duì)象的每個(gè)屬性都是指向源對(duì)象相應(yīng)屬性的 ref。每個(gè)單獨(dú)的 ref 都是使用 toRef() 創(chuàng)建的。

所以，可以這樣做：

<template>
  <div>{{ _msg }}</div>
  <div>{{ msg }}</div>
  <div>{{ count }}</div>
</template>

<script setup>
import { toRef, toRefs } from "vue";
const props = defineProps({
  msg: String,
  count: Number,
});

// _msg 也是響應(yīng)式的，會(huì)隨著 props.msg 改變。
const _msg = toRef(props, "msg");

// msg, count也是響應(yīng)式的，會(huì)隨著 props 改變。
const { msg, count } = toRefs(props);
</script>

到此這篇關(guān)于Vue3中響應(yīng)式解構(gòu)props的使用的文章就介紹到這了,更多相關(guān)Vue3響應(yīng)式解構(gòu)props內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: