vue - vue2.0与vue3.0的区别

最新推荐文章于 2024-08-14 18:28:32 发布
最新推荐文章于 2024-08-14 18:28:32 发布
阅读量223 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42631976/article/details/119979499
版权
本文概述了Vue 3的关键变化，包括使用proxy替代Object.defineProperty的响应式系统升级，Composition API的引入提升代码组织，虚拟DOM算法优化提高性能，TypeScript的使用以及项目结构调整。核心亮点涉及V-model简化、多根标签支持和组件间交互的新方法.
摘要由CSDN通过智能技术生成

1.重构响应式系统，使用proxy代替object.Object.defineProperty
2.新增Composition API，更好的逻辑复用和代码组织
3.修改了虚拟dom的算法，vue2需要diff所有的虚拟节点，vue3采用分层次，找到不同的层，针对变化的层进行diff，更新速度不会在受模板的影响，而是由可变的内容决定。
4.vue使用ts编写
5.项目目录结构发生变化：移除了config 和 build、static，新增public 文件夹，index.html移到public中
6.vue3为create App，vue2为new vue
7.v-model代替以前的v-model和.sync
8.Vue 3 的 Template 支持多个根标签，Vue 2 不支持

.sync的作用？
子组件要修改父组件传过来的动态值的语法糖，省去了父组件需要写的方法

Composition的作用？
不需要写data、methods，直接在setup函数中写

潇潇-潇潇
关注
专栏目录
vue2.0 和 3.0区别
xssxxssx的博客
11-30 370
1.数据的双向绑定的异同 Vue2.0使用Object.defineProperty， Vue 3.0使用ES6的新特性porxy 2.0、原理：使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知（无法深度劫持） 3.0、原理：使用ES6的新特性proxy来劫持数据，当数据改变时发出通知（可以深度劫持） 2.0 代码： 1 <!DOCTYPE html> 2 <html lang="en">
vue3.0和vue2.0的区别
l1160321190的博客
08-17 320
<div v-if="visible" class="toast-wrap"> <div class="toast-msg">我是一个 Toast 文案</div> </div>
简说Vue3.0和Vue2.0的区别
漏网之鱼的博客
09-16 1256
默认进行懒观察（lazy observation）。 在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。 更精准的变更通知。 比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。 3.0 新加入了 TypeSc
Vue3 和 Vue2 的区别？
最新发布
weixin_42381609的博客
08-14 655
因为数据要放在data里面，方法要放在methods里面，计算属性要放在computed里面，监听部分要放在watch里面。操作功能A的代码时，只需要在这紧挨着的100行里面查找就可以了，其他700行不用管，整体方便多了。Vue2：1）根组件的文件顺序由上至下依次为：模板template、脚本script 、样式css。选项式 API，实现一个功能涉及的数据、方法、计算属性，分散在不同的地方。组合式API，实现一个功能涉及的数据、方法、计算属性，都放在同一个的地方。
vue2和vue3区别
热门推荐
weixin_54722719的博客
02-24 10万+
1. vue2和vue3双向数据绑定原理发生了改变 vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。 相比与vue2，使用proxy API 优势有：defineProperty只能监听某个属性，不能对全对象进行监听；可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部
Vue2.0和Vue3.0的区别
kwame211的博客
06-25 1058
Vue2.0和Vue3.0的区别
Vue 2.0 与Vue 3.0的区别
sally18的博客
08-13 1475
1.项目结构 Vue-cli2.0与3.0在目录结构方面，有明显的不同，vue-cli3.0移除了配置文件目录config和build文件夹，同时移除了static静态文件夹。新增了public文件夹，打开层级目录还会发现，index.html移动到public中 2.配置项 3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同，没了config文件，跨域需要配置域名时，从config/in...
Vue2.0与Vue3.0区别总结
qq_38870034的博客
09-27 216
Vue2.0与Vue3.0区别总结 结构部分: 1.程序主入口文件 main.js **vue2.0 import Vue from 'vue' import App from './App.vue' import router from "./router" import store from "./store" new Vue({ store, router, render: h => h(App),
vue-zhihudaily-2.0 cs1707vue-zhihudaily-2.0 Zhihudaily演示是使用Vue 2.0，vue-router和vuex以及服务器端渲染构建的。 由cs1707-Vue.js开发
05-27
vue-zhihudaily-2.0 Zhihudaily演示使用Vue 2.0 + vue-router + vuex构建，并带有服务器端渲染。 主要参考vue-hackernews-2.0。 实时演示功能Se vue-zhihudaily-2.0 Zhihudaily演示是使用Vue 2.0 + vue-router + ...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板.zip
02-25
【标题】：“管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板”是一个基于现代前端技术栈构建的后台管理应用框架。这个框架使用了Vue.js的2.0版本，Vue-router进行页面路由管理和ElementUI作为...
xw-vue-cli-2.0:xw-vue-cli-2.0 脚手架2.0版本
04-22
7. **文档与示例**：xw-vue-cli-2.0通常会提供详细的文档和示例代码，帮助开发者理解和使用这个脚手架，快速上手开发。 在文件列表中，我们看到`xw-vue-cli-2.0-master`，这很可能是项目的源代码仓库主分支。打开这...
vue3.0 vue-quill-editor.rar
09-19
在实际开发中，可能会遇到Vue3.0与Vue-Quill-Editor的兼容性问题，例如生命周期钩子的变化、Prop类型检查的更新等。这时，需要查阅官方文档或社区资源，寻找相应的解决方案。对于Vue CLI 3，要确保项目的构建配置...
vue2.0和3.0的区别
Lemontree_fu的博客
03-10 199
https://blog.csdn.net/xy19950125/article/details/83823112 https://www.cnblogs.com/tongjiaojiao/p/11812194.html
谈谈vue2.0和vue3.0区别在哪里
are_gh的博客
08-04 625
结构部分 程序主入口文件 main.js vue2.0 import Vue from 'vue' import App from './App.vue' import router from "./router" import store from "./store" new Vue({ store, router, render: h => h(App), }).$mount('#app..
vue2.0和vue3.0区别
码农日常的博客
10-25 451
一.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势： 1可直接监听数组类型的数据变化 2监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升 3可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行 4直接实现对象属性的新增/删除 二.重构 Virtual DOM 1模板编译时的优化，将一些静态节点编译成常量 2slot优化，将slot编译为la
vue3.0 和 2.0 的区别
yzkdcsdn的博客
11-23 125
默认进行懒观察（lazy observation）。 在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。 更精准的变更通知。 比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。3.0 新加入了 TypeScript
vue2.0和vue3.0的区别
想好了再写！
03-26 338
# Vue2.0 Vue3.0 安装 npm install -g vue-cli npm install -g @vue/cli 项目创建 vue init webpack 项目名 vue create 项目名（项目名需小写） 运行 npm run dev npm run serve 配置 webpack.config.js(自动添加) vue.config.js(手动添加) 路由模式配置 const router = new VueRouter({mode:“histor...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值