完美的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 项目名

相关配置：

npm run serve启动

推荐插件：eslint、vetur

eslint不生效：可以在settings.json设置

启动报错：cannot find module 'fork-ts-checker-webpack-plugin-v5'

解决方法：删除package-lock.json -> npm i --save -> npm run serve

相关知识点:

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

setup（）{} : 逻辑处理和生命周期一般都在这里写，很重要

Composition-Api

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

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

// const count = ref(0)

computed: 计算属性API

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的对象；

export function defineComponent (options:unknown) {    

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

defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 。

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

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

全局API修改

主要修改点：

全局配置：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

其他