尝试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
  }

#####三、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'
```