0
点赞
收藏
分享

微信扫一扫

Vue3 setup

莞尔小迷糊 2022-04-15 阅读 132
前端

概念

setupVue3.0中一个新的配置项,其值为一个函数。

组件中所用到的数据、方法等等,都要在setup中配置。

执行时机

在创建组件实例时,在beforeCreate之前执行(一次), 此时组件对象还没有创建,在初始化组件解析之后调用setup。(在生命周期方面,在beforeCreate钩子之前调用)

setup 方法是在 components , props , data , Methods , Computed , Lifecycle , methods 之前执行。

返回值

setup 中定义的状态、方法如果要在模板中使用,必须 returnsetup函数有两种return返回值:

1、一般都是返回一个对象,为模板提供数据,对象中的属性、方法被合并到渲染上下文,在模板中可以直接使用此对象中的所有属性/方法;

2、若返回一个渲染函数:则可以自定义渲染内容。

例如: return () => h(‘div’, [count.value, object.foo])

注意点

  1. setup 尽量不要与 Vue2.x 配置混用
  2. Vue2.x配置(data、methos、computed…)中可以访问到setup中的属性、方法
  3. 但是在setup中不能访问到Vue2.x配置(data、methos、computed…
  4. 如果有重名, setup优先
  5. setup不能是一个async函数,因为返回值不再是return的对象, 而是promise,模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

实例

<template>
  <div>
    <h1></h1>
    <div>
      <p>msg is: {{ msg }}</p>
      <a-button @click="getMsg">点击</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    // 定义响应式变量
    const msg = ref('Hello, this is example page!')
    function getMsg() {
      // 访问该变量
      console.log(msg.value)
    }
    // 返回变量
    return { msg, getMsg }
  },
}
</script>

页面及点击按钮效果:
在这里插入图片描述

setup 的参数

格式:

setup(props, context) / setup(props, {attrs, slots, emit})

props : 父组件传递过来的属性, setup 函数中 props 是响应式的,它会随着数据更新而更新,并且不能使用 ES6 解构,因为它会不能使 props 为响应式。

context : 是一个普通的对象,暴露3个组件的· property

  1. Attribute attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs

  2. 插槽 slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots

  3. 触发事件 emit: 用来分发自定义事件的函数, 相当于 this.$emit

实例:

<template>
  <h1>{{ msg }}</h1>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Index',
  props: {
    msg: { type: String, default: 'This is default props' },
  },
  setup(props, { attrs, slots, emit }) {
    console.log('attrs---', attrs)
    console.log('slots---', slots)
    console.log('emit---', emit)
    console.log('props.msg---', props.msg)
    return {
      msg: props.msg,
    }
  },
})
</script>

打印结果:
在这里插入图片描述

举报

相关推荐

0 条评论