vue3.0基础

优点特性：

• vue3采用渐进式开发，向下兼容。
• 性能提升。
• composition api集合，解决vue2组件开发问题。
• 新api的加入，如 Teleport瞬移组件，suspense异步加载组件等。
• 更好的TS支持。

一、开发环境搭建

1. npm install -g @vue/cli安装脚手架。
2. 创建项目：vue create projectName
3. 选择项目需要插件…
4. 也可以使用图形界面快速创建应用。vue ui

二、vue3基础

• setup函数

定义数据，处理数据（结合vue2中的data和metheds）

import { ref } from 'vue'
setup(){
    const girls = ref(['a','b','c']);
    // 返回定义的数据和方法
    return { girls }
}

• reference函数(ref)

定义数组类数据

• reactive函数

将数据放到data中，不使用ref的形式。注意页面引用时需要data.xxx

import { reactive } from 'vue'
setup(){
    const data = reactive({
        girls:['a','b','c'];
        selectGirls:()=>{ ... }
    })
    return { data }
}
// 页面中使用 --> {{ data.selectGirls }}

三、VUE的生命周期

• setup 在组件创建之前执行
• onBeforeMount 组件挂载到页面之前执行
• onMounted 组件挂载到页面之后执行
• onBeforeUpdate 组件更新之前执行
• onUpdated 组件更新之后执行
• onBeforeUnmount 组件卸载之前执行
• onUnmounted 组件卸载之后执行
• onActivated 组件激活时执行，组件包在keep-alive组件中时可用
• onDeactivated 组件消失时执行“如tab组件切换时”
• onErrorCaptured 组件报错出异常时执行
• onRenderTracked 调试用
• onRenderTriggered 调试用

1. 除setup外的其他生命周期钩子函数都要在vue中引入
2. 除setup外的其他生命周期钩子函数都在setup中使用
3. vue3同样兼容vue2的生命周期(不写在setup中)

四、watch

// 变量可以是一个数组
watch(变量,(newValue,oldValue)=>{
...
})

五、模块化 hooks

六、Teleport瞬移组件

让组件独立出来，挂载在任何想要挂载的地方，避免样式冲突。

<teleport to="domid">
    组件代码
</teleport>

七、suspense组件，异步请求组件

<suspense>
    <template #default>
        // 异步组件
    </template>
    <template #fallback>
        loading...
    </template>
</suspense>

搭配axios、onErrorCaptured钩子函数使用。