vue3复盘学习（一）

其实说是复盘，因为在平常的开发中因为公司一些项目和其他原因断断续续的使用了一段时间 vue3，因为着急赶项目，有些知识点没有系统性学习，所以决定从今天开始一点点再学习一遍٩(•̤̀ᵕ•̤́๑)ᵒᵏᵎᵎᵎᵎ哈哈！

刚开始从vue2 过渡到 vue3的同学们其实是有些不适应的，但是随着前端框架更多的拥抱浏览器新特性，vue2也是随着发展过程累计了很多的历史包袱。

首先从开发维护的角度看，Vue 2 是使用 Flow.js 来做类型校验。但现在 Flow.js 已经停止维护了，整个社区都在全面使用 TypeScript 来构建基础库，Vue 团队也不例外。然后从社区的二次开发难度来说，Vue 2 内部运行时，是直接执行浏览器 API 的。但这样 就会在 Vue 2 的跨端方案中带来问题，要么直接进入 Vue 源码中，和 Vue 一起维护，比如 Vue 2 中你就能见到 Weex 的文件夹。要么是要直接改为复制一份全部 Vue 的代码，把浏览器 API 换成客户端或者小程序的。比如 mpvue 就是这么做的，但是 Vue 后续的更新就很难享受到。最重要的是Vue 2 响应式并不是真正意义上的代理，而是基于Object.defineProperty() 实现的，它是对某个属性进行拦截，所以有很多缺陷，比如：删除数据就无法监听等。

• Composition API 组合语法

Composition API 是 Vue 3 中我最喜欢的一个特性，我们也叫它组合 API。

<div id="app">
  <h1 @click="add">{{state.count}} * 2 = {{double}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const {reactive,computed} = Vue
  let App = {
    setup(){
      const state = reactive({
        count:1
      })
    function add(){
      state.count++
    }
    const double = computed(()=>state.count*2)
    return {state,add,double}
    }
  }
  Vue.createApp(App).mount('#app')
</script>

使用 Composition API 后，代码看起来很烦琐，没有 Vue 2 中 Options API 的写法简单

好懂，但 Options API 的写法也有几个很严重的问题:

1、由于所有数据都挂载在 this 之上，因而 Options API 的写法对 TypeScript 的类型推导

很不友好，并且这样也不好做 Tree-shaking 清理代码。

2、新增功能基本都得修改 data、method 等配置，并且代码上 300 行之后，会经常上下

反复横跳，开发很痛苦。

3、代码不好复用，Vue 2 的组件很难抽离通用逻辑，只能使用 mixin，还会带来命名冲突

的问题

• 新的组件

Vue 3 还内置了 Fragment、Teleport 和 Suspense 三个新组件。

Fragment: Vue 3 组件不再要求有一个唯一的根节点，清除了很多无用的占位 div。

Teleport: 允许组件渲染在别的元素内，主要开发弹窗组件的时候特别有用。

Suspense: 异步组件，更方便开发有异步请求的组件。

• 新一代工程化工具 Vite

Vite 不在 Vue 3 的代码包内，和 Vue 也不是强绑定，Vite 的竞品是 Webpack，而且按

照现在的趋势看，使用率超过 Webpack 也是早晚的事。

剩下的明天接着干吧 来活了先干活