Vue3 基础

引言

vue3 新特性

• Performance：性能比 vue2.x 快 1.2~2 倍
• Tree shaking support：支持按需编译，体积更小
• Composition API：组合 API，类似 React Hooks
• Custom Renderer API：暴露了自定义渲染 API
• Fragment,Teleport(Protal), Suspense：新增三个组件
• Better TypeScript support：更好的支持 TS

学习资源

staging-cn.vuejs
vue3js

npm安装

最新稳定版
$ npm i vue@next

vue3 使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli
npm i -g @vue/cli

在 vue 项目中运行：

vue upgrade --next

vue3 提供了单文件配套组件

$ npm i -D @vue/compiler-sfc

脚手架安装

vue create 项目名

vue3 新语法

Setup：组合式 api 写法入口，生命周期 beforeCreaed 之前调用

• setup 新的组件选项是一个接收 props 和 context
• 可以返回一个对象的函数
• 作为组件内使用 Composition API 的入口
• 创建组件实例，然后初始化 props ，调用 setup 函数。会在 beforeCreaed 之前调用

export default {
   
	setup(props,context){
   
		// 在 template 模板中使用的数据和方法需要在 setup 返回
		return{
   
		}
	}
}

context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值

setup(props,context){
   
	// Attribute （非响应式对象，等同于 $attrs）
	console.log(context.attrs)
	// 插槽（非响应式对象，等同于 $slot）
	console.log(context.slots)	
	// 触发事件 （非响应式对象，等同于 $emit）
	console.log(context.emit)
	// 暴露公共 property 函数
	console.log(context.expose)
	// 在 template 模板中使用的数据和方法需要在 setup 返回
	return{
   
	}
}
// setup(props,{attrs,slots,emit,expose}){
   
//	...
// }

响应式数据：ref（基本数据类型）&reactive（复杂类型）

基本数据类型：ref
使用 ref 包裹基本数据类型，使用时需要 .value 来获取值

<template>
	<div>
	<h2>{
   {
   msg}}</h2>
	</div>
</template>
<script>
import {
   ref} from 'vue'
export default {
   
	setup(props,context){
   
		// ref 基本数据类型 
		// 定义响应式数据 msg
		let msg = ref('this is a msg')
		const updateMsg = ()=> {
   
			// .value 获取值更新
			msg.value = 'update msg'
		}
		// return 返回值
		return{
   
			msg,
			updateMsg
		}
	}
}
</script>

复杂数据类型：reactive

import {
   reactive} from 'vue'
export default {
   
	setup(props,context){
   
		// reactive 复杂数据类型
		let msgs = reactive({
   
			countent:'text',
			age:12
		})
		const updateMsg = ()=> {
   
			//  获取值更新
			msgs.countent = 'reve'
		}
		// return 返回值
		return{
   
			msgs,
			updateMsg
		}
	}
}

toRefs 将响应式数据对象转变为普通对象，然后将普通对象中的每个属性变为单个响应式对象

导入 toRefs

import {
   toRefs} from 'vue'

在 setup 中返回数据的地方加入 …toRefs 数据

setup(){
   
	const msgs = reactive({