vue3中defineComponent 的作用详解

这篇具有很好参考价值的文章主要介绍了vue3中defineComponent 的作用详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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版本的写法,但也有一些要注意的地方文章来源地址https://www.toymoban.com/news/detail-445655.html

  1. 由于在执行 setup函数的时候,还没有执行 Created 生命周期方法,所以在 setup 函数中,无法使用 data 和 methods 的变量和方法
  2. 由于我们不能在 setup函数中使用 data 和 methods,所以 Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined
  3. setup函数只能是同步的不能是异步的
    (1)上面的组件中用defineComponent包裹了组件;
    (2)defineComponent函数,只是对setup函数进行封装,返回options的对象;
    (3)defineComponent最重要的是:在TypeScript下,给予了组件 正确的参数类型推断 。
    vue3中defineComponent 的作用详解
    (4)defineComponent可以给组件的setup方法准确的参数类型定义.
    (5)defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
    (6)defineComponent 可以正确适配无 props、数组 props 等形式
    (7)引入 defineComponent() 以正确推断 setup() 组件的参数类型

到了这里,关于vue3中defineComponent 的作用详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3的refs用法

    前言: Vue 3的Refs是一种新的API,用于访问DOM元素或组件实例。Refs提供了一个简单的方法来访问DOM元素或组件实例,以便在Vue组件中进行操作和处理。在Vue3中,refs用于获取组件或DOM元素的引用,类似于Vue2中的$refs。但与Vue2不同的是,在Vue3中,refs可以是一个字符串或一个函数

    2024年02月15日
    浏览(47)
  • Vue3中watch的用法

            watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑。 用于开启深度监听 是否开启初始化检测,默认是值发生变化时,才会执行监听器里面的方法,开启immediate后初始化就执行一次。   侦听器的回调使用与源完全相同的响应式状态是很常见的

    2024年02月16日
    浏览(42)
  • TypeScript快速上手语法+结合vue3用法

            前言:             本篇内容不涉及TypeScript安装以及配置,具体安装及配置篇可以看下面目录,本篇只涉及TypeScript语法相关内容,及结合vue3的用法。不讲废话,简单直接直接开撸。 目录      TypeScript的具体安装及配置  TypeScript快速上手语法+结合vue3用法 1、

    2024年02月03日
    浏览(36)
  • Vue3 关于 provide、inject 的用法

    前言: 在前端项目中牵扯的最多的莫过于组件之间的传值了,除了最最常用的 props 和 emit ,其实在 Vue 中还额外提供了另外几种方法。今天分享一种组件之间通信的方法。 先别着急考虑标题这个 api 的含义。在这里我先动手写一个比较常见的场景。 所对应的组件内部代码比

    2024年02月06日
    浏览(38)
  • Thread 类基本用法详解

    Thread 是Java操作多线程 最核心 的类。 Java中创建线程的方法有很多种!!! 上述方法,只是语法规则不同,本质上是一样的方式,创造出的线程并无不同。 面试题一:请说明Thread类中run和start的区别 答案: 作用功能不同: a.run方法的作用是描述线程具体要执行的任务; b.

    2024年02月08日
    浏览(47)
  • Vue中axios的基本用法

    目录 1.什么是axios? 2.axios的特征 3.axios在使用的时候需要注意的细节  4.axios在vue中的实例运用(留言评论接口)  App.vue代码 mian.js代码   axios 是一个基于promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装     从浏览器中创建 XMLHttpRequest     从 node.js 发出 htt

    2024年02月08日
    浏览(30)
  • Vue3父组件访问子组件数据 defineExpose用法

    在Vue3中,父组件可通过创建一个ref(null),然后将赋值的元素写在当前子组件上即可,在需要的时候,通过定义的响应式变量即可获取,获取后即可取得当前子组件内部dom以及当前子组件内部变量方法等,并且直接使用子组件内部方法。但是有时候获取的时候返回的没有什么信

    2024年02月12日
    浏览(42)
  • Vue3:有关v-model的用法

    目录 前言: 回忆基本的原生用法: 原生input的封装: 自定义v-model参数: 对el-input的二次封装: 多个v-model进行绑定: v-model修饰符: v-model自定义参数与自定义修饰符的结合:         提起v-model,想必都不陌生,作为vue的经典语法,帮助我们在编写项目的时候,省了很多很多

    2024年02月05日
    浏览(36)
  • vue3 watch 监听多值以及深度监听用法

    1.监听单个值 引入: import {…, watch} from “vue”; import {useRouter} from ‘vue-router’; 2.监听多个值 还是上面路由的例子 2.深度监听

    2024年02月14日
    浏览(53)
  • Vue3快速上手(八) toRefs和toRef的用法

    顾名思义,toRef 就是将其转换为ref的一种实现。详细请看: toRef就相当于是将对象Person里的某个属性,如name,单独解构赋值给name,并使得name同为响应式对象。且修改name的值时,person.name的值随之变化。 如下图可以看到: 1、name是一个ObjectRefImpl对象的实例。 2、底层还是个P

    2024年02月19日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包