VUE3（八）setup與ref函數

Setup是VUE3.0中為我們新提供的的組件選項。

創建組件實例，然后初始化props，緊接着就調用setup函數，從生命周期鈎子的視角來看，他在beforecreate之前調用。

setup()是函數，具有return，return函數中定義的變量，把其暴露給模板。

一：setup

1：Setup可以替代VUE2中的data和method函數。

（1）：使用VITE創建一個空項目，默認會給我們一個helloworld組件，我們使用這個組件做測試。

項目搭建，請移步《VUE3（一）安裝+使用vite創建一個項目》

上代碼，這里大概展示一下VUE3的新寫法

Helloworld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <button @click="clickMe()">點我彈窗</button>
</template>
 
<script lang='ts'>
import {
    ref,
} from "vue";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 使用setup 代替 data
  // 因為我這里使用的是typescript，因此需要給參數指定類型
  setup(props:any,context:any){
    let count = ref(0); 
    const clickMe = () => {
      // 使用ref關鍵字綁定的變量，賦值 的時候必須使用.value
      count.value++;
      alert('hi');
    }
    return {
      count,
      clickMe
    }
  },//*/
 
  // 這是VUE2.0的寫法，data與methods
  /*data() {
    return {
      count: 0
    }
  },
  methods:{
    clickMe(){
      alert('hi');
    }
  }//*/
}
</script>

2：setup的兩個參數（prpos，context）

關於setup的參數，官方文檔有詳盡的介紹，具體，請參照：

https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#參數

（1）：prpos

setup 函數中的 props 是響應式的，當傳入新的 prop 時，它將被更新。

這個就是父組件傳入子組件的參數。具體，請參照上方的代碼。

看到這里，其實你可以停下來，自己搭建一個項目試一下。

（2）：context

這個參數名稱不是固定的，叫什么都行。

傳遞給 setup 函數的第二個參數是 context。context 是一個普通的 JavaScript 對象，它暴露三個組件的 property：

export default {
  setup(props, context) {
    // Attribute (非響應式對象)
    console.log(context.attrs)
 
    // 插槽 (非響應式對象)
    console.log(context.slots)
 
    // 觸發事件 (方法)
    console.log(context.emit)
  }
}

這里我只用到了emit（觸發事件），這個可以用作將子組件的值傳遞給父組件。具體我們之后組件那部分再說。

3：setup中沒有辦法訪問到this。

this在setup中不可用，方法和聲明周期都可以寫在setup中，如果在方法中訪問setup中的變量時，直接變量名就可以使用。方法名和變量名要在setup中return出去才可以正常執行。

4：setup()是函數，具有return，return函數中定義的變量，把其暴露給模板。

具體，請參見第一部分的示例代碼

二：ref關鍵字

在setup函數中，可以使用ref函數，用於創建一個響應式數據，當數據發生改變時，Vue會自動更新UI

一定要注意，ref創建的是一個響應式數據。這個在VUE3.0中非常靈活，幾乎是怎么玩都行的。具體后邊還會說到，這里大概說一下基本用法。

1：引入ref

import {
    ref,
} from "vue";

2：使用注意點

在 VUE 的模板中使用 ref 的值不需要通過 value 獲取 （Vue 會通過自動給 ref 的值加上 .value）

在 js 中使用 ref 的值必須使用 .value 獲取

上方代碼實現效果：

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：