尝试vue3.x 新特性 - CompositionAPI

一、初试化项目

1、安装 vue-cli3

npm install -g @vue/cli

2、创建项目

vue create my-project

3、在项目中安装 composition-api,体验 vue3 新特性

npm install @vue/composition-api --save

4、在main.js引入，通过 Vue.use() 进行安装

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

二、setup(props, context){ }

里边放data数据、生命周期、自定义函数

props : 是参数一，接收 props 数据。

context：是参数二，这个上下文对象中包含了一些有用的属性。些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：

setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }

另外一种简便写法 ：将context解构，如下：

//一般用这种，按需引入，节约内存
setup(props,{attrs,slots,parent,root,emit,refs}){
console.log(attrs,slots,....)
}

3.0和2.0对照：

attrs --- this.$attrs
emit  --- this.$emit
listeners --- this.$listeners
parent --- this.$parent
refs --- this.$refs
root --- this.$root

三、reactive (用来声明对象、数组的数据类型)

1、引入 reactive 函数：

import { reactive } from '@vue/composition-api'

2、reactive 里边声明数组/对象

setup() {
     // 创建响应式数据对象
    const state = reactive({count: 0})

     // setup 函数中将响应式数据对象 return 出去，供 template 使用
    return state
}

四、ref(用来声明基础数据类型)

ref用来声明基础数据

model:'login' ; //vue 2.0写法

//引入模块
import { ref } from '@vue/composition-api';
//声明数据
const model = ref('login');//vue 3.0写法
//取值方式
console.log(model.value)  //'login'