Vue3新特性
Performance:性能更比vue2强
Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。(即导入的模块就打包)
Composition API :组合API
Fragment,Teleport,Suspense:”碎片”,Teleport即Portal传送门,“悬念”
Better TypeScript support:更优秀的Ts支持
Custom Renderer API:暴露了自定义渲染的API。
一.定义组件数据
vue2中通过data的方式来定义一些当前组件的数据
data(){
return{
message:"我是消息"
}
},
vue3利用ref或reactive来定义一些当前组件的数据
1.在<script>导入相关组件
import {ref,reactive} from "vue"
2.在setup中用ref和reactive来定义一些当前的组件数据
setup(){
const message=ref("我是消息")
const names=reactive({//reactive声明复杂一些的数据,如对象,列表
list:["iwen","ime","frank"]
})
return{
message,
names
}
}
二.定义组件内部方法
vue2中通过methods的方式来定义一些当前组件的方法
例:点击按钮的点击事件响应
methods:{
clickhandle(){
console.log("改变")
}
},
vue3中直接在setup中采用function方法
function clickhandle(){
console.log("改变")
}
还需在return中返回。
三.传递数据
在vue3中传递数据,首先要对传递的数据进行类型声明
props:{
msg:String,
},
然后在setup后的()中添加props
setup(props){
console.log(props.msg)
}
这样就可以打印传递的数据。
在vue2中,组件的方法中可以通过this获取到当前组件的实例,并执行data变量的修改,方法的调用,组件的通信等等,但在vue3中,setup()在beforeCreate和created时机就已调用,无法使用和vue2一样的this,但是可以通过接收setup(props,ctx)的方法,获取到当前组件的实例和props.即vue3中setup中没有this关键字。ctx就是当前实例对象。
四.生命周期函数
Vue2 | Vue3 |
beforeCreated | 无 |
created | 无 |
beforeMounted | onBeforeMounted |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmount | onUnmount |
Vue2中是直接生命周期函数
Vue3是在setup中加入生命周期函数
首先引入生命周期函数。
import {onMounted} from "vue"
然后在setup中写入
onMounted(()=>{
console.log("生命周期函数1")
})//比vue2有优势,vue2一个生命周期函数只能存在一个,现在可以存在多个。
onMounted(()=>{
console.log("生命周期函数2")
})
五.Provide/Inject
1.provide()和inject()可以实现嵌套组件之间的数据传递(即不用一级一级之间向下传递,可直接传递)
2.这两个函数只能在setup()函数中使用。
3.父级组件中使用provide()函数向下传递数据
4.子级组件中使用inject()获取上层传递过来的数据。
5.不限层级(只能父级向子级传递)
操作步骤:
首先在父组件中引入provide
import { provide } from 'vue';
在父组件中添加setup()和要传递的数据
setup(){
provide("data","wo")
}
然后在子组件中引入inject
import {inject } from 'vue';
在子组件中添加setup()和要接收的数据
setup(){
const data1=inject("data")
}
六.模板语法
不再限制于模板中只能有单个根节点。