尝试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‘
```

尝试vue3.x 新特性 - CompositionAPI

上一篇:计算器(Windows程序设计)


下一篇:win10更新后VM 与 Device/Credential Guard 不兼容。在禁用 Device/Credential Guard 后,可以运行 VM 的方法