vue3 ref 和 reactive 函數

前言

上一篇博文介紹 setup 函數的時候，最後出現一個問題，就是在 setup 函數中，編寫一個事件，直接去修改定義的變數，發現頁面上沒有更新成功，並且控制檯報錯，那這篇部落格就是講解遇到的這個問題應該如何處理。

ref 函數介紹

• ref 作用就是將基礎資料轉換為響應式資料，把封包裝成響應式的參照資料型別的資料。
• 通過對引數返回值的 value 屬性獲取響應式的值，並且修改的時候也需要對 value 進行修改。
• 在 vue2 當中，通過給元素新增 ref='xxx' ，然後使用 refs.xxx 的方式來獲取元素，vue3 也可以。
• 當 ref 裡面的值發生變化的時候，檢視會自動更新資料。
• ref 可以操作基本資料型別和複雜資料型別，建議使用 ref 操作只對基本資料型別進行操作。

ref 函數使用

使用 ref 函數很簡單，首先要在頁面參照，然後就可以直接使用了，具體怎麼使用呢，下面為了方便介紹，簡單來幾個案例。

ref 函數處理基本資料型別

首先提一個需求：頁面有一個名稱需要顯示，有一個按鈕，點選按鈕的時候修改頁面展示的這個名字。

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <h1>姓名：{{name_ref}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'  // 引入 ref
  export default {
    setup() {
      const name = '