快捷導(dǎo)航

vue3中defineComponent?的作用詳解

更新時(shí)間：2022年09月19日 14:59:38 作者：musicBird

這篇文章主要介紹了vue3中defineComponent?的作用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue3中，新增了 defineComponent ，它并沒有實(shí)現(xiàn)任何的邏輯，只是把接收的 Object 直接返回，它的存在是完全讓傳入的整個(gè)對(duì)象獲得對(duì)應(yīng)的類型，它的存在就是完全為了服務(wù) TypeScript 而存在的。

我都知道普通的組件就是一個(gè)普通的對(duì)象，既然是一個(gè)普通的對(duì)象，那自然就不會(huì)獲得自動(dòng)的提示，

import { defineComponent } from 'vue'
 
const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup // 沒有該有的提示，這非常的不友好
}
 
export default component

但是當(dāng)我們加上 defineComponent（）之后，就完全不一樣了，可以獲得自動(dòng)提示，vue2、vue3的自動(dòng)提示都有

import { defineComponent } from 'vue'

const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup（）{
    // setup 可接受兩個(gè)參數(shù)，一個(gè)props，和 context
  }
}

export default component

接下來看看 setup 中的兩個(gè)參數(shù) props 與 context ,
props指組件傳遞來的參數(shù)，并且ts可以推論出props的類型.props也就是 vue2 中組件中的 props
context 有三個(gè)屬性 attrs slots emit 分別對(duì)應(yīng)vue2中的attrs屬性、slots插槽、$emit發(fā)送事件

import { defineComponent } from 'vue'

const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup（props, context）{
    // props.data
    // context.attrs    context.slots    context.emit 
  }
}

export default component

擴(kuò)展知識(shí)：

vue3之組件結(jié)構(gòu)(defineComponent,setup函數(shù))

在vue3中,對(duì)組件整體結(jié)構(gòu)做一些調(diào)整,先看一個(gè)組件案例:

import {ref, reactive, defineComponent, Ref, onMounted} from "vue";
import {settingsStore} from "/@/store/module/settings";
import {IRoleList} from "/@/interface/role/list.interface";
import {IHttpResult} from "/@/interface/common.interface";
import { ILogListParams } from "/@/interface/settings/log.interface";
export default defineComponent({
   name: "LogList",
   setup() {
       const logList: Ref<IRoleList[]> = ref([]);
       const columns = [
       	...
       ];

       const pagination = ref({
            "show-quick-jumper": true,
            total: 100,
            current: 1,
            "show-size-changer": true,
            "show-total": (total: number, range: number[]) => `${range[0]}-${range[1]} 共 ${total} 條`,
            "pageSize": 10
       });
       const columnsList = ref(columns);
       const params: ILogListParams = reactive({
           page: 1,
           pageSize: 10
       });

       onMounted(() => {
           findLogList();
       });
       /*查詢?nèi)罩玖斜?/
       const findLogList = () => {
           settingsStore.findLogList(params).then((res: IHttpResult) => {
               const data = res.data;
               pagination.value.total = data.total;
               logList.value = data.list;
           });
       };
       /*修改狀態(tài)*/
       const onChange = (pagination: {current: number, pageSize: number}) => {
           params.page = pagination.current;
           params.pageSize = pagination.pageSize;
       };
       /*刪除*/
       const onDelete = (id: number) => {
           alert(id);
       };
      return {
          columnsList,
          logList,
          onDelete,
          onChange,
          pagination
      };
   }
});

從上面組件代碼中,可以看出在vue3中沒有this對(duì)象, 所有的邏輯代碼都寫在setup方法里面.
若是要在HTML模板頁(yè)面中使用變量或者方法, 需要在setup方法return出去.

setup是Vue3 的一大特性函數(shù), 它有幾個(gè)特性:

1、setup函數(shù)是處于生命周期函數(shù) beforeCreate 和 Created 兩個(gè)鉤子函數(shù)之間的函數(shù)

2、setup函數(shù)是 Composition API（組合API）的入口

3、在setup函數(shù)中定義的變量和方法最后都是需要 return 出去的不然無法再模板中使用

setup函數(shù)的注意點(diǎn)：

vue3雖然支持vue2.x版本的寫法,但也有一些要注意的地方

1、由于在執(zhí)行 setup函數(shù)的時(shí)候，還沒有執(zhí)行 Created 生命周期方法，所以在 setup 函數(shù)中，無法使用 data 和 methods 的變量和方法

2、由于我們不能在 setup函數(shù)中使用 data 和 methods，所以 Vue 為了避免我們錯(cuò)誤的使用，直接將 setup函數(shù)中的this修改成了 undefined

3、setup函數(shù)只能是同步的不能是異步的