Vue3新特性

六大亮点

• Performance:性能比Vue2.0强
• Tree shaking support:可以将无用模块剪辑,仅打包需要的(项目打包变小)
• Composition API:组合api
• Fragment,Teleport,Suspense:‘碎片’,Teleport即Protal传送门,‘悬念’
• Better TypeScript support:更优秀的Ts支持
• Custom Renderer API:暴露了自定义渲染API

ref或者reactive
需要将ref,reactive从vue中引入

import {ref,reactive} from 'vue'

在setup中使用,并要return出去

setup(){
	//ref
	const mesg=ref('消息')
	//复杂类型使用reactive定义
	const obj=reactive({
		list:['1','2','3']
	})
	//修改值的内容通过.value形式
	const fun = ()	=>	{
		mesg.value='新消息'
	}

	//return 出去之后可以直接在页面中使用{{}}使用
	return {
 		mesg,
 		obj,
 		fun 
	}

}

props传值以及setup中不使用this

在父组件中绑定需要传值的数据

<HelloWorld dataContext='数据'></HelloWorld>

子组件中接收参数props

//使用props定义接收参数的类型
props:{
	dataContext:String
}
setup(props,ctx){
	//打印内容1
	console.log(props.dataContext)
	const receber=props.dataContext
	
	//setup中不使用this访问组件实例,使用context
	//打印内容2
	console.log(ctx)
	
	return {
		receber
	}
}

打印内容1

打印内容2

setup中的生命周期

• 在setup中使用生命周期函数
• setup中没有beforeCreate和Created
• setup是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之前执行。且只执行一次。
• 使用需要在前面加on来访问组件的生命周期函数且需要被引入
• onBeforeMount/onMounted/onBeforeUpdate/onUpdated/onBeforeUnmount/onUnmounted

//需要引入生命周期函数
import { onMounted} from 'vue'
//在setup中使用
setup(){
	 // 比以前的优势,以前同一个生命周期函数只能存在一个,现在可以存在多个
	onMounted(()=>{
		console.log('生命周期函数onMounted1')
	})
	onMounted(()=>{
		console.log('生命周期函数onMounted2')
	})
}

组件传值provide/inject

• provide()和inject()可以实现嵌套组件之间的数据传递
• 这两个函数只能在setup()函数中使用
• 父级组件中使用provide()函数向下传递数据
• 子组件中使用inject()函数获取从上层传递过来的数据
• 不限层级

在父组件中引入provide

import {provide,reactive} from 'vue'
//在setup中使用
setup(){
	//provide('key','需要传递的数据')
	provide('message','我是消息')
	provide('obj',obj)
	//可以传递复杂类型数据
	const obj = reactive({name:'一个姓名',age:188})
	return {
	obj 
	}
}

在子组件中引入inject

import {inject} from 'vue'
//在setup中使用
setup(){
	//inject(需要接收的数据)
	const msg =	inject('message')
	const nnn =	inject('obj')
	return {
	msg,
	nnn
	}
}

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h1>{{ nnn.name }}</h1>
  </div>
</template>