vue3 正式发布有两年多了,之前也做过一些学习和研究。vue3 发布后给某培训机构开发了一套vue3课程课件,自己也开源了一套基于vue3的后台管理系统(因为个人懒的原因,半年后才上传到gitHub,且到目前为止一直没有更新过)。

附上网址:https://github.com/gegestst112/vue-stick-admin,有兴趣的可以下载看一下,希望我之后会继续完善和更新。

虽然现在还有很多用vue2的项目,甚至有新启动的项目还基于vue2。但vue3作为 vue 的主流开发技术栈,仍然是必然的趋势。因为现在 vue 官网文档也是 vue3 的版本了,指不定哪天要找 vue2 的文档都要花点功夫了。

近期整理一下 vue2 和 vue3 的不同点,希望对读到这篇文章的小伙伴从vue2过渡到vue3有些许帮助。

先来看下 vue2 和 vue3 有哪些相同点,至少先知道技术升级到 vue3 没有看起来那么难。

  1. vue3 中还是可以使用选项式 api 的写法,我们熟悉的data、props、computed、methods、watch、mixins 这些选项都还在;
  2. created、mounted 等生命周期钩子函数也还是熟悉的味道;
  3. 模板语法基本上一致,我们还是可以用 v-bind 绑定数据,v-on 绑定事件,v-if 和 v-for 渲染元素等等;

 

总结一下,即使不使用 vue3 新增的那些特性,也还是可以完成日常开发工作的。

不过,如果项目是使用 vue3 技术栈开发的,应该大部分人都会尝试适应vue3 组合式 api 语法。如果其他同事开发的模块用的都是组合式 api,唯独你还是用选项式 api,多少会有些违和感的。接下来看看 vue3 新增了哪些新特性

 

一、创建实例的方式不同

vue2 使用 new Vue({ …选项 }) 构造函数的方式创建;

vue3 通过内置的 createApp( //根组件 ) 方法创建。

 

二、Vue3 新增的片断特性,允许单文件组件中的 template 元素下可以有多个节点

在 Vue 2 中的组件中的顶层 <template> 块不支持多个节点,通常都是用一个 div 元素包含所有节点或组件,如:

1       <template>
2         <div>
3         <div class=”top”></div>
4           <header>...</header>
5           <main>...</main>
6           <footer>...</footer>
7         </div>
8       </template>

影响虽然不大,但最终生成的页面中会有很多不必要的节点嵌套,有经验的前端开发工程师应该都深有体会,特别是有强迫症会更觉得难受。

在Vue 3 中解决了这个问题,组件中可以包含多个节点,如下所示:

1       <template>
2         <header>...</header>
3         <main v-bind="$attrs">...</main>
4         <footer>...</footer>
5       </template>

现在这样写的组件,当组件嵌套很多级的时候,可以节省很多嵌套的节点。不过记得显示定义 attribute 分布的位置。

 

三、vue3的响应式原理实现不一样

vue2的双向数据绑定是使用 Object.definepropert() 对数据进行劫持,结合发布订阅模式实现。

vue3中使用了es6的proxyAPI对数据进行处理。

使用proxy 可以劫持整个data对象,然后递归返回属性的值的代理即可实现响应式。

 

四、新增了一些组件

比如 <teleport> 内置组件可以将内容挂载到指定的目标元素。

 

五、删除了过滤器

在 vue2 中过滤器就用得很少了,我只在 vue1 的时候用得比较多。对于习惯用过滤器的开发者可能有少许影响。

 

六、新增和修改了生命周期钩子函数

比如 destroyed 生命周期钩子被重命名为 unmounted;

新增了 renderTracked、serverPrefetch 等钩子函数;

在组合式 api 中不同的调用方式。

 

七、组合式 API

组合式 API 是 vue3 最大的一个变化,也是很多熟悉 vue2 的开发者最需要适应的方法。

  1. 可以在单文件组件中使用组合式 API 的编译时语法糖 <script setup>,有使代码更简洁、更好的运行时性能、能够使用纯 TypeScript 声明 props 和自定义事件等优势;
  2. 不能在 setup 中使用 this 返回 vue 实例对象
  3. 生命周期钩子函数名称前加了 on
  4. 传参 props 和 事件 emit 有不同的调用方式
  5. 计算属性 computed 和 监听器 watch 使用方式不同
  6. 新增大量的响应式 api,合理地运用这些 api 操作数据,并可使页面响应数据变化。

 

八、支持 typescript 开发语法

多了一种开发方式,有利于团队合作、使代码更规范和严谨;对于习惯 javascript 松散语法的开发者来说,可能不太喜欢这种开发方式

 

原文地址:http://www.cnblogs.com/jiangweiping/p/16919773.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性