以前我没得选，现在我想学点Vue3...项目开发流程，环境搭建，推荐插件，常遇报错，Vue3重要知识点，各种compos

完美的Vue实践项目是怎样的？

数据的展示 —— 最好是有多级复杂数据的展示
数据的创建 —— 可以发散出多个功能
组件的抽象 —— 循环渐进的组件开发
整体状态数据结构的设计和实现
权限管理和控制
真实的后端API

本地环境

node -v v10.15.3 >9
npm -v 6.14.9 >6
vue -V @vue/cli 4.5.9 >4.5 不够的要升级

开发步骤

安装node
vue-cli npm install -g @vue/cli
vue create 项目名

相关知识点

import { ref, computed, ... } from 'vue'

setup（）{} :

逻辑处理和生命周期一般都在这里写，很重要。

Composition-Api

一组低侵入式的、函数式的 API，使得我们能够更灵活地「组合」组件的逻辑。

ref: 转换响应式API（原始类型）

const count = ref(0)

computed: 计算属性API，相当于vue2中的computed计算属性

reactive: 转换响应式API（复杂类型或者原始类型），可代替ref，但是记得用toRefs代替

const data: DataProps = reactive({

    conunt: 0

})

注意点: 当用reactive使用, return出去，html写法比较麻烦，需要data.a 这种形式，想要直接a这种形式，需要...扩展运算符，但是会出现一个问题：将值从响应式对象中取出来，属性会失去响应式。因此需要用到toRefs

toRefs：搭配reactive，将reactive()创建出来的响应式对象转换成普通对象，只不过这个对象上的每一个属性节点，都是ref()类型的响应式数据

const refData = toRefs(data)

interface: 类型推断接口

interface DataProps { count: Number }

defineComponent：defineComponent函数，只是对setup函数进行封装，返回options的对象, defineComponent最重要的是：在TypeScript下，给予了组件正确的参数类型推断.

export function defineComponent (options:unknown) {    

return isFunction(options) ? { setup : options } : options    }

props: 传参集合, 与vue2差不多

emits：当前组件的通过emit的事件列表

类型：Array|Object

作用：Vue3.0中使用emit发起事件时会要求当前组件记录emit事件（没有则控制台会抛出警告）。

用途：用于记录当前组件emit的事件，当为对象时，则可以验证传入的值是否有效。

Teleport 瞬移（传送门）：

类似React的Portals。React 的Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀的方案，Vue 3中的Teleport跟这个其实是类似的。例如将嵌套在组件内部的弹窗传送到最外层

Suspense: 解决异步请求的困境，返回一个promise

Suspense是Vue 3新增的内置标签，每当我们希望组件等待数据获取时（通常在异步API调用中），我们都可以使用Vue3 Composition API制作异步组件。以前，在Vue 2中，我们必须使用条件（例如 v-if 或 v-else）来检查我们的数据是否已加载并显示后备内容。但是现在，Suspense随Vue3内置了，因此我们不必担心跟踪何时加载数据并呈现相应的内容。

<Suspense>
     <template #default> <async-com /></template>
     <template #fallback>Loading ...</template>
</Suspense>

Vue3.x 生命周期变化

被替换

beforeCreate -> setup()

created -> setup()

重命名

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

新增的

新增的以下2个方便调试debug的回调钩子：

onRenderTracked

onRenderTriggered

参考：www.mybj123.com/8456.html

全局API修改

Vue2全局API遇到的问题：

在单元测试中，全局配置非常容易污染全局环境。
在不同的apps中，共享一份有不同配置的Vue对象，变得非常困难。

主要修改点：

全局配置：Vue.config-> app.config

config.productionTip 被删除

config.ignoredElements改名为config.isCustomElement

config.keyCodes被删除

全局注册类API

Vue.component->app.component

Vue.directive->app.directive

行为扩展类API

Vue.mixin->app.,ixin

Vue.use->app.use

其他

如果对你有帮助，希望能够获得你的点赞认可～谢谢。

以前我没得选，现在我想学点Vue3...