vue2和vue3的区别

已于 2024-02-21 16:44:30 修改
阅读量185 收藏
点赞数 3
分类专栏： vue 文章标签： 前端 javascript vue.js
于 2024-02-21 16:38:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63625143/article/details/136214458
版权
本文探讨了Vue3相较于Vue2在性能上的提升，如更佳的treeshaking、编译器优化和响应式系统的改进，以及引入的新特性如v-once指令、ref和reactive、组合式API和setup函数的使用。
摘要由CSDN通过智能技术生成

vue3作为vue2的升级版，想必一定有很多提升和改进

那么二者到底有什么区别捏

1、性能的提升

(1)更好的treeshaking支持

顾名思义，treeshaking‘树摇’，可以将不需要的内容筛选掉，只留下有用的（需要的），也就是按需引入

(2)编译器的优化

(3)销毁和卸载的改进

(4)响应式系统的重写

在vue2中用的是object.defineProperty

在vue3中用的是proxy

(5)虚拟DOM的改进

2、新增的特性

(1)新增指令 v-onece

用于只渲染一次元素

(2)ref和reactive：用来声明响应式变量和对象

非响应式的数据不会在dom中实时变化

(3)组合式API Composition API

在vue2中是用的是选项式API optionAPI

在vue3中新增组合式API CompsitionAPI

(4)setup

组件实例化前被调用，可以用来设置组件数据，手机依赖，注册事件

WebMarisa
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的基本指令
qq_46030883的博客
10-26 134
基本指令： v-ones:只渲染一次 v-html:会将string的惠特米勒解析出来并且进行渲染 v-text:作用和mustache比较相似，都是数据显示在界面中 v-pre:用于跳过这个元素和他子元素的编译过程，用于希纳是原本的mustache语法。 v-cloak:----斗篷 我们浏览器可能会直接显示出未编译的mustache语法。斗篷的作用未进行编译的时候。当编译后就不会有作用了。 v-bind:动态绑定属性 动态绑定a元素的和href属性 动态绑定img元素的src属性 动态绑定class
vue.js:v-once指令
qq_44631242的博客
09-13 298
在vue.js中指令是带有v-前缀的特殊属性。当表达式的值改变时，将某些行为，应用到DOM上。 v-once指令表示只会对组件或元素渲染一次，保证了插件内容的值不变。当再次渲染或重新给值时，元素的值仍不会发生改变。 <div id="app"> <p v-once>这个孩子：{{message}}</p> </div> <script> var
Vue中v-once使用
m0_46694056的博客
03-15 1654
1、先看代码 当我们打开浏览器是如下： 如果在控制台中设置mes的值的话，页面的内容也会跟着改变，如下： 这就说明vue是通过数据驱动来实现页面渲染的，如果我们加上v-once属性，这就意味着vue会跳过编译，只会渲染一次，后续就不会再去监听这个数据变量了，这也就能起到一个提高性能的作用，如：当用用户登录之后，用户的头像、昵称基本不会变，vue也就会跳过它，从而提高了性能。 ...
基于vue 使用element UI框架 实现走马灯 图片高度自适应
weixin_34192732的博客
07-03 3814
走马灯代码结构走一遍 （imgList数组在data中声明,此为本地数据） data() { return{ // 图片需要引入, 否则无法显示 imgList: [ {id: 0, idView: require('../assets/images/banner3.jpg')}, {id: 1, name: '详情', idView: requi...
vue v-once只执行一次的指令
jjw_zyfx的博客
09-27 3392
渲染完后就不会再被改变了
vue 开发者工具devtools(谷歌浏览器插件)，包括vue2和vue3
01-08
这两个版本的插件需要分别安装，因为它们针对的是Vue框架的不同版本，Vue 2和Vue 3在设计和实现上有显著的区别。 对于Vue 2.x，Vue Devtools 提供了以下关键功能： 1. **组件树**：显示应用程序的组件层次结构，使...
vue2以及vue3 chrome调试工具
09-22
Vue.js 是一款流行的前端JavaScript框架，分为Vue 2和Vue 3两个主要版本。Vue 2是较早的稳定版本，而Vue 3则引入了许多性能优化和新特性。Chrome调试工具是开发者在Web开发过程中不可或缺的辅助工具，特别是对于Vue...
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt
07-31
这份PPT主要对比了基于Vue2的IView和Webpack技术栈与基于Vue3的Vben和Vite技术栈之间的差异，探讨了为何选择更新的技术和框架。报告中详细讨论了两者在底层原理、加载速度、框架特性以及潜在的缺点等方面，旨在解释...
vue2与vue3的使用区别与组件通信
09-12
本篇文章将深入探讨Vue2和Vue3在使用上的主要区别以及组件通信的方法。 ### Vue2与Vue3的区别 #### 1. Composition API Vue2 使用的是 Options API，所有组件选项如 data、methods、computed 等都直接在组件选项...
vue2和vue3的区别以及常问的题
08-01
Vue2 和 Vue3 区别及常见问题解析 Vue2 和 Vue3 是两种不同的前端框架，它们之间存在许多差异，这些差异体现在双向数据绑定、生命周期钩子、指令用法等方面。在本文中，我们将详细地探讨 Vue2 和 Vue3 之间的差异...
Vue中的v-once
lqt123l的博客
10-01 2240
Vue v-once 这两天在看vue, 看到一个v-once, 记一个笔记，要是有错误请大家指正。 先上没有v-once的码： &lt;script src='/vue.js'&gt;&lt;/script&gt; &lt;html&gt; &lt;div id="app"&gt; &lt;p&gt;{{text}}&lt;/p&gt; &lt;p&gt;{{
Vue v-once
秋殇阁
07-18 1万+
v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。 下面我们看个例子，我们先不使用v-once指令： &lt;!--v-once示例--&gt; &lt;template&gt; &lt;div&gt; &lt;div&g...
vue中v-once
cmolong的博客
03-08 2709
v-once 作用： 执行一次性地插值，当数据改变时，插值处的内容不会更新，v-once所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，该块都将被视为静态内容。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v...
vue项目中使用$.once(‘hook:beforeDestory‘,() =＞ {})清理定时器问题
千里之行，始于足下！
03-30 1万+
在vue项目通常我们清理定时器的方法时，通常有两种方法 方法一： 1、首先在vue实例的data中定义定时器的名称： export default{ data(){ timer:null } } 2、在方法（methods或者页面初始化的时候使用定时器） this.timer = setInterval(()=>{ //需要做的事情 },1000); 3、然后在页...
vue源码之$once是如何实现的
少油少盐不要辣
03-14 1079
1. 前言 之前研究了下观察者模式，但是事件注册后，都需要手动移除。就在琢磨，能否执行一次后，自动移除。正好vue有这一功能。于是，研究了下相关代码。 2.vue的$once vue的事件处理代码放在了events.js文件中。它的$once长这样： /** * Adds an `event` listener that will be invoked a single * time then automatically removed. * * @param {String} event * @
Vue.js 知识点总结(v-bind v-once v-html)
数据库爆破专家的博客
04-24 1934
文章目录v-bindv-oncev-html v-bind v-bind用来绑定数据 相关用法 （1）动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。 （2）在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。 （3）动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。 按常规来写vue: <!DOCT...
vue指令中的v-once
热门推荐
A31208的博客
05-05 2万+
v-once在日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。常见用法如下：当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变的&lt;div id="app"&gt; &lt;p v-once&gt;{{msg}}&lt;/p&gt; //msg不...
说说 Vue.js 中的 v-once 指令
weixin_34417200的博客
11-17 539
被定义了 v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示。 html： &lt;div id="app"&gt; &lt;div v-once&gt; {{content}} &lt;/div&gt; &lt;/div&gt; 复制代码js： &lt;script...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 792
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
vue2 和vue3区别
08-25
- *3* [vue2和vue3区别](https://blog.csdn.net/weixin_54722719/article/details/123069837)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值