关于vue 3.0

作者:老吴(转载请加出处)

大家看到这个标题就意味这博主已经开始在学习vue3的路上了，我是观看b站李南江老师讲解的详细

1、关于vue3

• 此前 Vue 发布了 3.0 的 beta 版本，不久后项目核心开发者尤雨溪公开分享了关于该版本的相关信息。

• 首先，beta 阶段意味着：

1. 已合并所有计划内的 RFC
2. 已实现所有被合并的 RFC

• Vue CLI 现在通过 vue-cli-plugin-vue-next 提供了实验性支持
  此外还提供了一个用于 Vue 3 的最小化 webpack 配置，支持单文件组件
  其中有一个主要的 RFC 是关于新引入的 Composition API（组件声明式），有人认为这是语法上的大变化，但实际上这不是直接替换掉原有的 Option API（选项声明式），而是引入了一种更好的选择，项目中可以自行选择使用，Vue 3 在语法上基本没有什么变化。

• 相比选项声明，对于拥有许多不同逻辑关注点（功能关注点）的大型组件来说，组件声明可将不同组件逻辑复用组合，更加高效；同时由于组件声明调用的都是函数，不需要反复使用“this”，用法上会更加自然；另外，代码可压缩性也会更好。

• 尤雨溪介绍了 vuex、vue-cli、vue-test-utils、vite 与 vue-devtools 等工具的相关进展，目前官方库对 Vue 3 的支持情况如下：
  

• 浏览器兼容方面，目前的版本需要在 runtime 环境中使用原生的 ES2015+，并且尚未支持 IE11，但是 Vue 3 将会支持 IE11，实现方式是使用独立的 build 版本。

• Vue 3 来了，那 2.x 怎么办，尤雨溪介绍，2 系列还会发布最后一个小版本 v2.7，会在这个过程中从 3.0 反向移植一些改进，同时会提前进行一些 3.0 中的特性弃用警告，并且会提供 18 个月的支持。
  

• 另外 3.0 代码库现在用 TypeScript 重写，尤雨溪直言 Vue 3 对于 TypeScript 的支持“很好”。不禁让人联想起此前有人吐槽尤雨溪不会用 TypeScript。

2、我们为什么要使用vue3?

• 既然要使用vue3那么肯定是比vue2强的地方咯，不然用它干什么(￣_￣|||)
• vue3新特性：

1. 数据响应重新实现（ES6的proxy代替Es5的Object.defineProperty）
2. 源码使用ts重写，更好的类型推导
3. 虚拟DOM新算法（更快，更小）
4. 提供了composition api，为更好的逻辑复用与代码组织
5. 自定义渲染器（app、小程序、游戏开发）
6. Fragment，模板可以有多个根元素

• vue2 vue3响应原理对比

1. vue2使用Object.defineProperty方法实现响应式数据
2. 缺点：
   • 无法检测到对象属性的动态添加和删除
   • 无法检测到数组的下标和length属性的变更
3. 解决方案：
   • vue2提供Vue.$set动态给对象添加属性
   • Vue.$delete动态删除对象属性
   • 重写数组的方法，检测数组变更

• 1.vue3使用proxy实现响应式数据
  • 优点：
    1. 可以检测到代理对象属性的动态新增和删除
    2. 可以见到测数组的下标和length属性的变化
  • 缺点：
    1. es6的proxy不支持低版本浏览器 IE11
    2. 回针对IE11出一个特殊版本进行支持

如有不足之处欢迎下方评论