Vue3与Vue2区别和总结（1）

在2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）

既然vue2已经存在了六七年之久为什么还要研发vue3呢？

那就不得不提vue3带来的提升了

1.Vue3带来了什么

1.性能的提升

• 打包大小减少41%

• 初次渲染快55%, 更新渲染快133%

• 内存减少54%

2.源码的升级

• 使用Proxy代替defineProperty实现响应式

• 重写虚拟DOM的实现和Tree-Shaking

  ......

3.拥抱TypeScript

• Vue3可以更好的支持TypeScript

4.接下来也就是，vue3带来的最新技术，组合式API，但同时在市场上也饱受争议。

Composition API（组合API）

• setup配置

• ref与reactive

• watch与watchEffect

• provide与inject

• ......

setup语法糖

1. 理解：Vue3.0中一个新的配置项，值为一个函数。

2. setup是所有Composition API（组合API）“ 表演的舞台 ”。

3. 组件中所用到的：数据、方法等等，均要配置在setup中。

4. setup函数的两种返回值：

   1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

   2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

5. 注意点：

   1. 尽量不要与Vue2.x配置混用

      • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。

      • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。

      • 如果有重名, setup优先。

   2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

ref函数

• 作用: 定义一个响应式的数据

• 语法: const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

  • JS中操作数据： xxx.value

  • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

• 备注：

  • 接收的数据可以是：基本类型、也可以是对象类型。

  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

  • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

• reactive定义的响应式数据是“深层次的”。

• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

是的，没有错，vue3放弃了原有的书写格式，取而代之的不同API的组合式维护。这样代码更加层次分明。

在Vue 2中，我们使用Options API来定义组件，即通过一个包含不同选项的对象来描述组件的行为。而在Vue 3中，引入了Composition API（组合式API），它可以让我们更好地组织和复用组件逻辑。

使用组合式API，我们可以通过函数形式定义组件的逻辑，而不再强制按照选项的方式来分割代码。这意味着可以更容易地组合和复用逻辑，提高开发效率。

组合式API的核心概念是使用setup()函数来定义组件的逻辑。在setup()函数中，我们可以使用Vue.js提供的一些函数和响应式API来定义数据、计算属性、方法、生命周期钩子等。

但是这并不是说vue3完全弃用了vue2的语法规则，你依然可以在vue3里面写vue2的代码，但是在这样会让你的代码非常不协调。一边是组合式api一边又是传统的option API，代码之间的割裂感会很强。我个人觉得还是vue2里面写vue2的，vue3那就用新的组合式api，这样是最好的。

5.你以为vue3就这些，nonono！

相当于新推出的组合式API，最让我感兴趣的是最新的vite构建工具。不同于vuecli 它是一个基于ES模块的快速开发工具。

Vue CLI 是构建在 Webpack 之上的，因此开发服务器和构建功能和性能都将是 Webpack 的超集。 Vite 概述 与 Vue CLI 类似，Vite 也是一个提供基本项目脚手架和开发服务器的构建工具。 然而，Vite 并不是基于 Webpack 的，它有自己的开发服务器，利用浏览器中的原生 ES 模块。 这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。

这不是在开玩笑，我有做一个对比，就仅仅算项目原生的启动时间，vite的项目速度远远快于vuecli的项目，这真的是一种飞跃！！！

vue官方也有做出相关评价，vite在很多方面的进步在于打破传统，大胆采用新技术。并且说到不会再采用webpack，老外直接哭死。

下一次继续vue3总结