总结vue2 和vue3的区别

最新推荐文章于 2024-04-25 17:53:36 发布
最新推荐文章于 2024-04-25 17:53:36 发布
阅读量580 收藏 1
点赞数
分类专栏： 深入浅出+vue实战 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43211137/article/details/127010628
版权

一、从数据双向绑定的原理。

vue2 使用的是ES5（ECMAScript 5 或者 ECMAScript 2009）的一个API即Object.definePropert() 对数据进行劫持：当你把一个普通的JavaScript对象传入Vue实例作为data  选项，Vue将遍历此对象所有的property，并使用Object.definePropert() 把这些property全部转为 getter/setter，每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把接触过的数据property记录为依赖，之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染。

vue3中使用了 es6(ECMAScript 6 或者 ECMAScript 2015) 的一个API 即Proxy对数据进行代理。

相对于Object.definePropert() 需要遍历所有对象才能实现事件监听，Proxy直接在对象之前设置了一个‘拦截’，在此过程中对原对象进行处理并且返回一个新的对象。

二、根节点的不同

vue2中，template只允许有一个根节点，如下图

当有多个根节点时 会报错:

 

vue3中可以出现多个根节点， 不会报错

 

 

三、生命周期的变化

vue2------------------------------------------------------vue3

 

键盘冒烟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue2.0中使用ES6
一个萌新程序猿的奋斗史
07-02 1万+
        在学习Vue.js之前，我们首先要了解ES6，ECMAScript 6(简称ES6)是JavaScript的语言标准。我是在Vue-cli脚手架上进行ES6的学习，Vue环境的搭建可以看我上一篇博客（小飞机）        1.let与const命令                需要注意的一点是：let只在当前所在的代码块有效。        所以在for循环中我们一般用let命...
三分钟认识Vue根节点
weixin_48115935的博客
05-20 2221
vue的根节点是什么，vue根节点的作用。
Vue2 D3.js demo
03-03
npm install/yarn npm run serve
Vue2+Webpack+ES6 兼容低版本浏览器（IE）
u013659786的博客
07-16 483
Vue2+Webpack+ES6 兼容低版本浏览器（IE） 1.解决方式：安装 “babel-polyfill” 1.1命令：npm install --save-dev babel-polyfill 1.2在入口main.js文件引入：import ‘babel-polyfill’ 1.3在build文件夹下找到webpack.base.conf.js.修改入口方式： entry: {...
vue2项目中如何使用es2020
李刚的学习专栏
11-04 3795
ECMAScript 规范史 ECMAScript 基于多种原始技术，最著名的是 JavaScript (Netscape) 和 JScript (Microsoft)。截止2022年，正式标准一共发布12次，es2020草案撰写中。 1997年06月，ECMAScript 第一版语言被采纳，标准规范发布； 1998年06月，Ecma 大会批准了第二版； 1999年12月，强大的正则表达式、更好的字符串处理、新的控制语句、try/catch 异常处理、更严格的错误定义、数字输出格式以及对未来语言增长预期的
一文看懂vue2与vue3的区别
阿宝的博客
12-29 826
一文了解v2和v3区别!
vue cli3脚手架之适配ie浏览器，即es6转换为es5语言
qq_41920758的博客
09-06 3838
1、babel.config.js里面修改为 module.exports = { presets: [ [ '@vue/app', { useBuiltIns: 'entry' } ] ] }; 2、在vue.config.js里面增加 // publicPath: process.env.NODE_ENV === "production" ? "./" : "./", // 默认情况下 babel-loader 会忽略
1. Vue 3.0介绍
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
11-27 541
源码组织方式的变化TypeScriptMonorepopackages下都是独立发行的包，可以独立使用。Composition API（组合API）Vue 3.0代码虽然重写，但是90%以上的API兼容2.x，并且增加了（组合API），是用来解决Vue 2.x在开发大型项目时遇到超大组件，使用不好拆分和重用的问题。性能提升Vue 3.0使用Proxy重写了响应式代码，并对编译器做了优化，重写了虚拟DOM，从而让渲染和update的性能都有了大幅度的提升，另外服务端渲染SSR的性能也提升了2-3倍。
【Vue3】Vue3简述
Superman_H的博客
02-15 761
# 创建 Vue3 工程 > #### ① 使用 vue-cli 创建 1. `vue -V` / `vue --version` 查看 @vue/cli 版本，确保在 4.5.0 以上 2. `npm i -g @vue/cli` 安装最新的 @vue/cli 3. `vue create vue_test` 创建项目 4. `cd vue_test` 进入工程目录 5. `npm run serve` 启动项目 > #### ② 使用 vite 创建 - vite - 新一代的前端构建工具 .
vue2-----ES6
m0_72967249的博客
09-26 896
vue2基础知识之ES6
vue 开发者工具devtools(谷歌浏览器插件)，包括vue2和vue3
01-08
vue开发者工具，谷歌浏览器插件。 支持vue2和vue3 1. vue2版本：5.3.4 2. vue3版本：6.0.0.18 beta 两个插件，需要分别安装，分别支持vue2和vue3
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt
07-31
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt,用于解释为什么使用新技术和框架
vue2以及vue3 chrome调试工具
09-22
vue2以及vue3 chrome调试工具
vue2与vue3的使用区别与组件通信
09-12
vue2与vue3的使用区别与组件通信
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 425
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 607
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
Record Little
04-23 634
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
Vue-router的动态路由：获取传递的值
woliuhuaqiangla的博客
04-22 401
Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。
docker部署前端项目（二）遇到的问题
最新发布
weixin_45379180的博客
04-25 305
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
vue2 和vue3区别
08-25
Vue2和Vue3之间有一些重要的区别。首先，Vue3的脚手架命令式可视化创建脚手架更加方便。其次，Vue3引入了Composition API，允许开发者更灵活地组织和重用代码。相比之下，Vue2使用的是选项式API。第三，数据监听方面，Vue2使用的是watch和computed来实现数据监听，而Vue3引入了watchEffect和computed来实现更高效的数据监听。此外，双向绑定方面，Vue2使用Object.defineProperty，而Vue3使用了更先进的Proxy API。另外，Vue3还支持碎片(Fragments)，即可以拥有多个根节点。总之，Vue3相比Vue2在性能、轻量化、协作等方面都有所优化，同时引入了更多的新特性和语法糖，提供了更好的开发体验和维护成本。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue2和vue3的区别（由浅入深）](https://blog.csdn.net/weixin_42974827/article/details/126560362)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *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_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值