Vue3 setup 方法的一些基本使用總結

官網介紹：https://cn.vuejs.org/api/composition-api-setup.html

基本使用

setup() 鉤子是在組件中使用組合式 API 的入口，通常只在以下情況下使用：

1. 需要在非單文件組件中使用組合式 API 時。
2. 需要在基於選項式 API 的組件中集成基於組合式 API 的代碼時。

setup方法返回值：

1. 返回一個對象，對象中的屬性和方法在模板中可以直接使用

import { ref } from 'vue'
const comTest = {
  setup() {
    const content = ref('chen')
    const updateContent = () => {
      content.value = 'nv'
    }
    return {     //setup返回一個對象，對象中的屬性和方法將會被注入到組件實例中
      content,
      updateContent
    }
  }
}

2. 返回渲染函數
   setup返回的函數爲渲染函數，被用作組件的渲染。渲染函數返回了一個div，用於動態生成組件的內容。

setup(){
 
  return()=>{   //渲染函數
    return      //動態生成組件的內容
    <div class="left-side"></div>  
  }
}

3. 返回模板中方法 + 渲染函數

返回一個渲染函數將會阻止我們返回其他東西。對於組件內部來說，這樣沒有問題，但如果我們想通過模板引用將這個組件的方法暴露給父組件，那就有問題了。

我們可以通過調用 expose() 解決這個問題：

import { h, ref } from 'vue'

export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}

使用 js/ts 文件寫組件時使用

一般情況下，我們可以直接 export 一個對象出去，對象包含vue組件的各個屬性和方法，也保護setup方法；但是爲了寫代碼提示，我們可以使用 defineComponent 函數包裹一下這個對象； defineComponent 的唯一作用就是寫代碼有提示；

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'TestCom',
  props: { },
  emits: [],
  setup(props, context) {
    ......
  }
})