快速上手Vue3
1.为什么使用Vue3?
打包文件的大小更小
内存消耗更少
渲染速度更快
总之一句话:性能提升了
2.新增特性
setup
简单理解就是vue2.x原来分出来的一个个模块,比如 data,methods,conputed这些,统统放在了一个setup里面,然后把页面需要用到的进行return就行。
3.从vue2.x的基础上快速上手vue3
data
vue2
data:{
return:{
str:'啦啦啦',
obj:{
name:'zs',
age:18
}
}
}
vue3
setup(){
const str=ref('啦啦啦')
const obj=reactive({
name:'zs',
age:18
})
return {
str,obj
}
}
快速记忆就是:
data里面的简单数据类型使用ref,复杂数据类型使用reactive
需要注意的是,如果在setup里面使用ref的值是需要使用它的value属性的,比如:
const str1=ref('啦啦啦')
const str2=ref('哈哈哈')
console.log(str1.value+str2.value) //输出 啦啦啦哈哈哈
在template里使用的话还是和vue2一样,不需要加.value
methods
vue2
methods:{
fn(){
console.log('funcrtion')
}
}
vue3
setup(){
function fn(){
console.log('funcrtion')
}
return {
fn
}
}
现在方法更像是在js里使用一样,声明,然调用
钩子函数(个别例子,以点见面)
vue2
onMounted(){
console.log('初始化')
}
vue3
setup(){
onMounted(()=>{
console.log('初始化')
})
}
现在是直接使用这个钩子api,把需要做的操作放在回调里面去就行
其他
其他的后续再写,不过vue3把这几点学会了,做个小项目练练手问题不大