快捷導航

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

更新時間：2024年09月18日 10:36:04 作者：前端學步

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

引言

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

什么是 ref

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

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

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

實現(xiàn)示例

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

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

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

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

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