vue3中defineComponent 的作用详解

 更新时间:2022年09月19日 14:59:38   作者:musicBird  
这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

vue3中,新增了 defineComponent ,它并没有实现任何的逻辑,只是把接收的 Object 直接返回,它的存在是完全让传入的整个对象获得对应的类型,它的存在就是完全为了服务 TypeScript 而存在的。

我都知道普通的组件就是一个普通的对象,既然是一个普通的对象,那自然就不会获得自动的提示,

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

但是当我们加上 defineComponent() 之后,就完全不一样了,可以获得自动提示,vue2、vue3的自动提示都有

import { defineComponent } from 'vue'

const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup(){
    // setup 可接受两个参数,一个props,和 context
  }
}

export default component

接下来看看 setup 中的两个参数 props 与 context ,
props指组件传递来的参数,并且ts可以推论出props的类型.props也就是 vue2 中组件中的 props
context 有三个属性 attrs slots emit 分别对应vue2中的attrs属性、slots插槽、$emit发送事件

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

扩展知识:

vue3之组件结构(defineComponent,setup函数)

在vue3中,对组件整体结构做一些调整,先看一个组件案例:

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();
       });
       /*查询日志列表*/
       const findLogList = () => {
           settingsStore.findLogList(params).then((res: IHttpResult) => {
               const data = res.data;
               pagination.value.total = data.total;
               logList.value = data.list;
           });
       };
       /*修改状态*/
       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对象, 所有的逻辑代码都写在setup方法里面.
若是要在HTML模板页面中使用变量或者方法, 需要在setup方法return出去.

setup是Vue3 的一大特性函数, 它有几个特性:

1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数

2、setup函数是 Composition API(组合API)的入口

3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

setup函数的注意点:

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

1、由于在执行 setup函数的时候,还没有执行 Created 生命周期方法,所以在 setup 函数中,无法使用 data 和 methods 的变量和方法

2、由于我们不能在 setup函数中使用 data 和 methods,所以 Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined

3、setup函数只能是同步的不能是异步的

  • 上面的组件中用defineComponent包裹了组件;
  • defineComponent函数,只是对setup函数进行封装,返回options的对象;
  • defineComponent最重要的是:在TypeScript下,给予了组件 正确的参数类型推断 。

defineComponent部分源码

  • defineComponent可以给组件的setup方法准确的参数类型定义.
  • defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
  • defineComponent 可以正确适配无 props、数组 props 等形式
  • 引入 defineComponent() 以正确推断 setup() 组件的参数类型

到此这篇关于vue3中defineComponent 的作用的文章就介绍到这了,更多相关vue3 defineComponent 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Vue实现直播功能

    详解Vue实现直播功能

    这篇文章主要介绍了Vue实现直播功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • Vue中的计算属性computed传参方式

    Vue中的计算属性computed传参方式

    这篇文章主要介绍了Vue中的计算属性computed传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue-cli项目中怎么使用mock数据

    vue-cli项目中怎么使用mock数据

    本篇文章主要介绍了vue-cli项目中怎么使用mock数据 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue+elementUI的表格最后一行合计自定义显示方式

    vue+elementUI的表格最后一行合计自定义显示方式

    这篇文章主要介绍了vue+elementUI的表格最后一行合计自定义显示方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue2实现directive自定义指令的封装与全局注册流程

    vue2实现directive自定义指令的封装与全局注册流程

    自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,下面这篇文章主要给大家介绍了关于vue2实现directive自定义指令的封装与全局注册流程的相关资料,需要的朋友可以参考下
    2023-02-02
  • vue富文本框(插入文本、图片、视频)的使用及问题小结

    vue富文本框(插入文本、图片、视频)的使用及问题小结

    这篇文章主要介绍了vue富文本框(插入文本、图片、视频)的使用及问题小结,需要的朋友可以参考下
    2018-08-08
  • 学习Vite的原理

    学习Vite的原理

    这篇文章主要介绍了Vite的原理,Vite是一个更轻、更快的web应用开发工具,面向现代浏览,Vite创建的项目是一个普通的Vue3应用,相比基于Vue-cli创建的应用少了很多配置文件和依赖,下面基于Vite相关资料内容,需要的朋友可以参考一下
    2022-02-02
  • Hooks对于Vue作用意义详解

    Hooks对于Vue作用意义详解

    这篇文章主要为大家介绍了Hooks对于Vue作用意义详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 深入浅析Vue中mixin和extend的区别和使用场景

    深入浅析Vue中mixin和extend的区别和使用场景

    Vue中有两个较为高级的静态方法mixin和extend,接下来给大家介绍Vue中mixin和extend的区别和使用场景,感兴趣的朋友一起看看吧
    2019-08-08
  • 详解vuex之store源码简单解析

    详解vuex之store源码简单解析

    这篇文章主要介绍了详解vuex之store源码简单解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06

最新评论