vue3新特性学习记录

一、setup函数

setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。

1. 调用时机

setup 函数会在 beforeCreatee 钩子之前被调用

2. 返回值

如果 setup 返回一个对象，则对象的属性可以在组件模板中被访问

3. 参数

第一个参数为 props，接收当前组件props选项的值，即获取父组件传递过来的参数

export default {
  props: {
    name: String,
  },
  setup(props) {
    console.log(props.name)
  },
}

第二个参数为context，接收一个上下文对象，该对象中包含了一些在vue2中需要通过 this 才能访问到属性

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.emit
  }
}

注：在 setup() 函数中无法访问 this

二、响应式系统API

vue3提供的一组具有响应式特性的函数式API，都是以函数形式提供的

1. reactive

reactive()函数接收一个普通对象，返回该普通对象的响应式代理对象

简单来说，就是用来创建响应式的数据对象，等同于vue2的 Vue.observable()函数

步骤：

1. 按需导入 reactive 函数

   import { reactive } from 'vue'

2. 调用 reactive 函数，创建响应式数据对象