草庐IT

vue3和vue2 的区别，vue3和vu2到底哪个好呢？

实例详解前端功能开发 2023-03-28 原文

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 松散语法的开发者来说，可能不太喜欢这种开发方式

 

vuevue3spancolorstyleVue

有关vue3和vue2 的区别，vue3和vu2到底哪个好呢？的更多相关文章

  1. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  2. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别？ - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  3. ruby - 这两个 Ruby 类初始化定义有什么区别？ - 2

    我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. spring.profiles.active和spring.profiles.include的使用及区别说明 - 2

    转自:spring.profiles.active和spring.profiles.include的使用及区别说明下文笔者讲述spring.profiles.active和spring.profiles.include的区别简介说明,如下所示我们都知道，在日常开发中,开发|测试|生产环境都拥有不同的配置信息如：jdbc地址、ip、端口等此时为了避免每次都修改全部信息，我们则可以采用以上的属性处理此类异常spring.profiles.active属性例：配置文件,可使用以下方式定义application-${profile}.properties开发环境配置文件:application-dev

  6. ruby - 这两段代码有什么区别？ - 2

    打印1:defsum(i)i=i+[2]end$x=[1]sum($x)print$x打印12:defsum(i)i.push(2)end$x=[1]sum($x)print$x后者是修改全局变量$x。为什么它在第二个例子中被修改而不是在第一个例子中？类Array的任何方法(不仅是push)都会发生这种情况吗？ 最佳答案 变量范围在这里无关紧要。在第一段代码中，您仅使用赋值运算符=为变量i赋值，而在第二段代码中，您正在修改$x(也称为i)使用破坏性方法push。赋值从不修改任何对象。它只是提供一个名称来引用一个对象。方法要么是破坏性

  7. ruby - 正则表达式在哪个位置失败？ - 2

    我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束

  8. ruby - Ruby 中 .next 和 .succ 的区别 - 2

    Ruby中的Fixnum方法.next和.succ有什么区别？看起来它的工作原理是一样的:1.next=>21.succ=>2如果有什么不同，为什么有两种方法做同样的事情？ 最佳答案 它们是等价的。Fixnum#succ只是Fixnum#next的同义词。他们甚至在thereferencemanual中共享同一block. 关于ruby-Ruby中.next和.succ的区别，我们在StackOverflow上找到一个类似的问题： https://stacko

  9. ruby - 在参数为 `yield self` 的方法中使用 `&block` 和在没有参数 `yield self` 的方法中使用 `&block` 有什么区别吗？ - 2

    我明白了defa(&block)block.call(self)end和defa()yieldselfend导致相同的结果，如果我假设有这样一个blocka{}。我的问题是-因为我偶然发现了一些这样的代码，它是否有任何区别或者是否有任何优势(如果我不使用变量/引用block):defa(&block)yieldselfend这是一个我不理解&block用法的具体案例:defrule(code,name,&block)@rules=[]if@rules.nil?@rules 最佳答案 我能想到的唯一优点就是自省(introspecti

  10. ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2

    由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A

随机推荐