快捷導(dǎo)航

Vue?3?中動(dòng)態(tài)賦值?ref?的應(yīng)用示例解析

更新時(shí)間：2024年09月18日 10:36:04 作者：前端學(xué)步

Vue3引入了Composition?API,其中ref是核心概念,允許開發(fā)者聲明響應(yīng)式狀態(tài),本文通過一個(gè)具體示例,探討了在Vue3中如何使用ref進(jìn)行動(dòng)態(tài)賦值,尤其是在處理DOM相關(guān)操作時(shí)的應(yīng)用,通過ref動(dòng)態(tài)賦值,可以有效管理組件內(nèi)的狀態(tài),提高代碼的可維護(hù)性和清晰度

引言

Vue 3 引入了許多新特性，其中之一便是 Composition API。Composition API 提供了一種新的編程范式，使開發(fā)者能夠更靈活地組織和復(fù)用邏輯。其中 ref 是一個(gè)核心概念，它允許我們在組件內(nèi)部聲明響應(yīng)式的狀態(tài)。本文將探討如何在 Vue 3 中使用 ref 進(jìn)行動(dòng)態(tài)賦值，并通過一個(gè)具體的例子來說明這一過程。

什么是 ref

在 Vue 3 中，ref 是一個(gè)函數(shù)，它接受一個(gè)值作為參數(shù)，并返回一個(gè)帶有 .value 屬性的對象。這個(gè)對象的 .value 屬性是響應(yīng)式的，這意味著任何對 .value 的更改都會(huì)觸發(fā)依賴此數(shù)據(jù)的視圖重新渲染。這對于管理組件內(nèi)的狀態(tài)非常有用。

動(dòng)態(tài)賦值 ref 的場景

在某些情況下，我們需要在運(yùn)行時(shí)動(dòng)態(tài)地給 ref 賦值，尤其是在處理 DOM 元素時(shí)。例如，當(dāng)我們需要初始化一個(gè)圖表，并且圖表容器是由一個(gè) DOM 元素提供的，這時(shí)候就需要在 DOM 渲染完畢后，獲取到這個(gè)元素，并將其賦值給 ref，以便后續(xù)操作。

實(shí)現(xiàn)示例

讓我們通過一個(gè)簡單的 Vue 3 組件來演示如何動(dòng)態(tài)賦值 ref。假設(shè)我們要?jiǎng)?chuàng)建一個(gè)包含一個(gè)圖表的組件，并且需要在圖表初始化時(shí)傳遞一個(gè) DOM 元素作為圖表的容器。

1. 創(chuàng)建 Vue 3 組件

首先，我們需要?jiǎng)?chuàng)建一個(gè) Vue 3 組件，并在其中定義一個(gè) ref 來存儲(chǔ)我們的圖表容器。

<template>
  <div :ref="setChartRef" style="width: 100%; height: 350px"></div>
</template>
<script setup>
import { ref } from 'vue';
const chartRef = ref(null); // 初始化為空
// 動(dòng)態(tài)賦值函數(shù)
const setChartRef = (e) => {
  chartRef.value = e;
};
</script>

2. 初始化圖表

接下來，我們需要在組件掛載完成后初始化圖表，并使用 chartRef 獲取到圖表容器。

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null); // 初始化為空
// 動(dòng)態(tài)賦值函數(shù)
const setChartRef = (e) => {
  chartRef.value = e;
};
// 組件掛載完成后的生命周期鉤子
onMounted(() => {
  if (chartInstance.value) {
    // 銷毀已存在的圖表實(shí)例
    chartInstance.value.dispose();
  }
  const chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption({
    title: { text: '動(dòng)態(tài)賦值 ref 示例' },
    tooltip: {},
    xAxis: {
      data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
    },
    yAxis: {},
    series: [{
      name: '銷量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
  // 保存圖表實(shí)例
  chartInstance.value = chartInstance;
});
</script>

在這個(gè)示例中，我們使用了 Vue 3 的 onMounted 生命周期鉤子，在組件掛載完成后初始化圖表。chartInstance 用于存儲(chǔ)圖表實(shí)例，以便我們可以在需要的時(shí)候訪問它。