Vue3的Composition组合式API(setup、ref函数、reactive函数)、Vue3响应式原理(Proxy和Reflect)、<script setup>

1. setup

1.1 基本使用

  1. 理解:Vue3.0中一个新的配置项,值为一个函数
  2. setup是所有Composition API的基础。组件中所用到的数据、方法等,都要配置在setup中
  3. setup函数的两种返回值:
    1. 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用
    2. 若返回一个渲染函数:则可以自定义渲染内容。则页面只显示渲染函数返回的内容,不会显示template中的内容
  4. 可以使用data、methods定义数据和方法。但尽量不要与Vue2配置混用,因为:
    • Vue2配置(data、methos、computed等)可以访问到setup中的属性、方法
    • 但在setup中不能访问到Vue2配置(data、methos、computed等)
    • 如果Vue3和Vue2有重名, 谁在后面以谁为准
  5. setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到promise中的属性(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

使用示例:App.vue

<template>
  <h2>姓名:{
  
  {name}}</h2>
  <h2>年龄:{
  
  {age}}</h2>
  <button @click="sayHello">点我say hello</button>
</template>

<script>
  // 导入渲染函数
  // import {h} from 'vue'

  export default {
    name: 'App',
    // 此处只是测试一下setup,暂时不考虑响应式的问题
    setup() {
      // 数据
      let name = 'lily'
      let age = 18

      // 方法
      function sayHello(){
        alert(`我叫${name},我${age}岁了`)
      }

      // 返回方式一: 返回一个对象
      return {
        name,
        age,
        sayHello
      }

      // 返回方式二: 返回一个渲染函数
      // return ()=> h('h1','第一中学')
    }
  }
</script>

页面效果如下。Vue开发者工具setup中的数据和函数分开显示的
在这里插入图片描述

1.2 两个注意点

  • setup执行的时机:在beforeCreate之前执行一次,setup中的this是undefined
  • setup的参数
    • props:需要先在子组件内声明接收,然后再传递给setup
    • context:上下文对象
      • attrs: 子组件临时保存props未接收的值。相当于this.$attrs
      • emit: 在子组件触发父组件传递过来的自定义事件,相当于this.$emit。需要先在子组件用emits进行接收
      • slots: 收到的插槽内容, 相当于this.$slots

使用示例
App.vue

  1. 向子组件传递自定义事件函数
  2. 向子组件传递props数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值