第三节: 一文带你全面理解 vue3 新增 setup 选项的使用

本文链接：https://blog.youkuaiyun.com/fjiex/article/details/138918847

前言

上一节, 我们分析了官网中通用API的前三个, 后面两个我们慢慢分析. 从今天这一章开始,我们进入Vue3的核心, 即组合式API 的学习.

首先我们从组合式API 的入口开始分析, 理解setup钩子函数的使用

1. setup 钩子函数的认识

钩子函数, 相信学过vue2的同学都很熟悉了, vue2组件的生命周期钩子函数会在组件不同的生命周期阶段调用.

但钩子函数的本质, 其实就是组件选项对象的方法. 我们通常说的选项都是选项对象的属性.

vue3选项对象中新增了一个钩子函数, 即setup作为组合式API的入口, 也就是说我们以后学习的组合式API 都需要在setup 钩子函数中使用.

示例:

import {
    defineComponent } from "vue";

export default defineComponent({
   
  // 钩子函数
  setup() {
   
    return {
   };
  },
});

和data钩子函数一样, setup函数返回一个数据对象.

不同的是,setup函数返回值除了可以是数据对象, 也可以是一个渲染函数.

2. setup基本使用

setup 钩子函数的使用,我们在上一章中也提及过:

setup函数可以返回一个渲染函数, 渲染函数返回通过h创建的vnode
setup函数可以返回一个对象, 对象的数据可以在模板上直接使用

因为之前的学习, 我们知道,只有组件实例对象上的数据才可以被模板直接使用,

接下来我们分析一下setup返回对象中数据在组件实例对象上是如何存放的.

2.1. setup 钩子函数返回对象

setup钩子函数是vue3 新增的选项, 是组件内部使用组合式API的入口, 在setup() 函数中返回的对象会暴露给模板和组件实例, 其他选项也可以通过组件实例来获取setup() 暴露的属性

我们使用mounted钩子函数输出组件实例对象, 即this的值, 查看setup返回值是否在组件实例对象上

示例:

import {
    defineComponent } from "vue";

export default defineComponent({
   
  setup() {
   
    // 声明数据
    const msg = "hello";

    // 返回数据对象
    return {
    msg };
  },

  mounted() {
   
    console.log("this", this);
  },
});

控制台输出结果:

你应该很明确看到,在组件实例对象上, 具有setup返回的数据msg, 因此setup返回对象中的数据,可以直接在模板中使用

2.2. setup 钩子函数中不能通过this 获取组件对象

上个实例中我们在mounted钩子函数中通过this访问组件实例对象. 如果我们在setup中需要使用组件实例对象怎么办? , 我们第一反应应该是使用this来获取, 看示例

示例:

import {
    defineComponent, } from "vue";


export default defineComponent({
   
  setup() {
   
    console.log("this", this);
   
    // 声明响应式数据
    const msg = "hello ";

    // 返回数据对象
    return {
    msg };
  }
});