让你30分钟快速掌握vue3教程

2023-07-13 07:49:03 69

经过了漫长的迭代，Vue3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript进行了大规模的重构，带来了CompositionAPIRFC版本，类似ReactHook一样的写Vue，可以自定义自己的hook，让使用者更加的灵活，接下来总结一下vue3.0带来的部分新特性。

setup()
ref()
reactive()
isRef()
toRefs()
computed()
watch()
LifeCycleHooks(新的生命周期)
Templaterefs
globalProperties
Suspense

Vue2与Vue3的对比

对TypeScript支持不友好（所有属性都放在了this对象上，难以推倒组件的数据类型）
大量的API挂载在Vue对象的原型上，难以实现TreeShaking。
架构层面对跨平台dom渲染开发支持不友好
CompositionAPI。受ReactHook启发
更方便的支持了jsx
Vue3的Template支持多个根标签，Vue2不支持
对虚拟DOM进行了重写、对模板的编译进行了优化操作...

一、setup函数

setup()函数是vue3中，专门为组件提供的新属性。它为我们使用vue3的CompositionAPI新特性提供了统一的入口,setup函数会在beforeCreate之后、created之前执行,vue3也是取消了这两个钩子，统一用setup代替,该函数相当于一个生命周期函数，vue中过去的data，methods，watch等全部都用对应的新增api写在setup()函数中

setup(props,context){
context.attrs
context.slots
context.parent
context.root
context.emit
context.refs

return{

}
}

props:用来接收props数据
context用来定义上下文,上下文对象中包含了一些有用的属性，这些属性在vue2.x中需要通过this才能访问到,在setup()函数中无法访问到this，是个undefined
返回值:return{},返回响应式数据,模版中需要使用的函数

二、reactive函数

reactive()函数接收一个普通对象，返回一个响应式的数据对象,想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可




import{defineComponent,defineAsyncComponent}from"vue";
constMyComponent=defineAsyncComponent(()=>import('./Component'));

exportdefaultdefineComponent({
components:{
MyComponent
},
setup(){
return{}
}
})

十二、vue3.x完整组件模版结构

一个完成的vue3.x完整组件模版结构包含了:组件名称、props、components、setup(hooks、computed、watch、methods等)




import{computed,defineComponent,getCurrentInstance,onMounted,PropType,reactive,ref,toRefs}from'vue';

interfaceIState{
count:0,
name:string,
list:Array

让你30分钟快速掌握vue3教程

热门推荐

随机推荐