-
vue3.0和2.0的区别
2019-10-16 11:45:491.1 Vue 3.0的新特性以及原理 1.1.1 观察机制 简述:更完备、更精准、更高效,可以对响应式跟踪进行调试,新增了一个创建可观察对象(observable)的 API。 3.0 版本里将有一个基于 Proxy 的观察者,它会提供全...1.1 Vue 3.0的新特性以及原理
1.1.1 观察机制
简述:更完备、更精准、更高效,可以对响应式跟踪进行调试,新增了一个创建可观察对象(observable)的 API。 3.0 版本里将有一个基于 Proxy 的观察者,它会提供全语言覆盖的响应式跟踪。相比于 2.x 版本里基于 Object.defineProperty 的观察者,新的实现更加强大: 可以检测属性的新增和删除 可以检测数组索引的变化和 length 的变化 支持 Map、Set、WeakMap 和 WeakSet 上面正文中提到的Proxy算是这次Vue 3.0 最大的亮点,它不仅取代了Vue 2.0 的 Object.defineProperty 方法并且组建生成增快 100%还有就是快一倍 / 减少一般的内存使用 下面看一个最简单的Proxy实现方法:
let obj = { a : 1 } let proxyObj = new Proxy(obj,{ get : function (target,prop) { return prop in target ? target[prop] : 0 }, set : function (target,prop,value) { target[prop] = 888; } }) console.log(proxyObj.a); // 1 console.log(proxyObj.b); // 0 proxyObj.a = 666; console.log(proxyObj.a) // 888
作者:大湿兄 链接:https://juejin.im/post/5d3bc7e7f265da1bc85470db 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 上述例子中,我们事先定义了一个对象 obj , 通过 Proxy 构造器生成了一个 proxyObj 对象,并对其的 set(写入) 和 get (读取) 行为重新做了修改。 当我们访问对象内原本存在的属性时,会返回原有属性内对应的值,如果试图访问一个不存在的属性时,会返回0 ,即我们访问 proxyObj.a 时,原本对象中有 a 属性,因此会返回 1 ,当我们试图访问对象中不存在的 b 属性时,不会再返回 undefined ,而是返回了 0 ,当我们试图去设置新的属性值的时候,总是会返回 888 ,因此,即便我们对 proxyObj.a 赋值为 666 ,但是并不会生效,依旧会返回 888! 想要了解更多Proxy就去这里看看阮一峰大大的ECMAScript 6 入门: es6.ruanyifeng.com/#docs/proxy 新的观察者还有以下特点: 提供了一个创建可观察对象的 API。对于中小型应用来说,这个 API 能提供一个轻量、简单的跨组件状态管理方案。 不可变的可观察对象(Immutable observable)。我们可以给一个值创建多个不可变的版本,以防有人修改其属性,必须要在系统在内部临时将其解锁时才能修改其属性。这个机制能够用于冻结传给子组件的属性或者冻结 Vuex 状态树之外的状态变更。 更强大的 debug 能力。我们使用新的 renderTracked 和 renderTriggered 钩子来精确地查明一个组件的 render 是在什么时候由谁触发的。 很容易知道为什么一个组件会重新渲染 **1.1.2 其他的运行时增强** 简述:体积更小、速度更快,支持 tree-shaking,支持 fragment 和 portal,支持自定义 render。 体积更小。新的代码库在设计的时候就考虑了 tree-shaking。内置的组件(如 )和内置的指令(v-model)是按需引入的,支持 tree-shaking。新的运行时最小体积将低于 10kb(gzip之后)。除此之外,由于很多特性是支持 tree-shaking 的,所以我们可以提供更多的内置特性,如果你不想用这些特性,你的代码体积完全不会增加。另外在这里说一嘴,Vue 2.0 体积是Vue 3.0 的一倍 速度更快,包括虚拟 DOM 的挂载和更新、组件实例的初始化和观察者的创建。3.0 版本将让你的应用启动时间减少一半。 支持 fragment 和 portal。虽然体积变小了,但是 3.0 版本还是带来了新功能,那就是支持 Fragment(一个组件包含多个根节点)和 Portal(在 DOM 中渲染一个 subtree,而不需要在一个组件中)。 插槽机制增强。所有由编译产生的插槽现在都是函数,这些函数会在子组件的 render 调用时被调用。这样一来,插槽中的依赖会被认为是子组件的依赖而不是父组件的依赖。这意味着:1、当插槽内容变化时,只有子组件重新渲染;2、当父组件重新渲染时,如果插槽内容没有变化,子组件就不需要重新渲染。这个特性提供了更精确的组件树层面上的变更检测,所以会减少很多无用的渲染。 自定义 render。我们会提供一个 API 用来创建自定义的 render,因此你不需要为了自定义一些功能而 fork Vue 的代码。这个特性给 Weex 和 NativeScript Vue 这样的项目提供了很多便利。 **>1.1.3 编译器增强** 简述:编译出的内容对 tree-shaking 友好,更多 AOT 优化,更好的错误提示,对 source map 的支持更好。 为了输出对 tree-shaking 友好的代码,模板中如果用到了一些可选特性,那么生成的代码中将使用 ES 模块语法来 import 这些特性。因此没有用到的可选特性就不会出现在最终代码中。 由于对虚拟 DOM 进行了优化,所以有了更高效的编译时优化,比如静态树提升、静态属性提升、为运行时添加编译提示信息以减少子节点正常化(children normalization),VNode 创建的快速路径等。 重写解析器(parser),以在模板编译错误提示中添加位置信息。这也会使得 Vue 支持模板的 source map。新的解析器可以提供给第三方工具使用,比如 eslint-plugin-vue 和 IDE。 **1.2 Vue 3.0和Vue 2.0 的对比** 1. 默认进行懒观察(lazy observation)。在 2.x 版本里,不过数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。 2. 更精准的变更通知。比例来说:2.x 版本中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。 暂时来讲,Vue 3.0 和 Vue 2.0 中间虽然api没有什么特别大的变化,但是相对于原理而言Vue 3.0 使用了TypeScript进行重构之后各方面的性能提升都有了一个重大突破(相对于2.0来说),另外这个工作已近从2.6版本渐渐开始了,虽然提升效果不是很明显,但是我相信Vue3.0能给我们带来更大的惊喜.
-
vue3.0和2.0的区别及项目的搭建
2019-11-29 10:16:27在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。 可以直接看 github源码。 标题新版Vue 3.0计划并已实现的主要架构改进和新功能: 编译器(Compiler) 使用...在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。
可以直接看 github源码。标题新版Vue 3.0计划并已实现的主要架构改进和新功能:
- 编译器(Compiler)
- 使用模块化架构
- 优化 “Block tree”
- 更激进的 static tree hoisting 功能 (检测静态语法,进行提升)
- 支持 Source map
- 内置标识符前缀(又名"stripWith")
- 内置整齐打印(pretty-printing)功能
- 移除 Source map 和标识符前缀功能后,使用 Brotli 压缩的浏览器版本精简了大约10KB
- 运行时(Runtime)
- 速度显著提升
- 同时支持 Composition API 和 Options API,以及 typings
- 基于 Proxy 实现的数据变更检测
- 支持 Fragments (允许组件有从多个根结点)
- 支持 Portals (允许在DOM的其它位置进行渲染)
- 支持 Suspense w/ async setup()
- 目前不支持IE11
- List item
- 3.0 新加入了 TypeScript 以及 PWA 的支持
- 部分命令发生了变化:
- 下载安装 npm install -g vue@cli
- 删除了vue list
- 创建项目 vue create
- 启动项目 npm run serve
- 默认项目目录结构也发生了变化:
- 移除了配置文件目录,config 和 build 文件夹
- 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
- 在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
- 如果:你个人还是很想用之前的创建项目的方式 ,那你则需要安装 (npm install -g @vue/cli-init) 这样就可以像之前一样创建项目 eg: vue init webpack vue-program
npm install -g @vue/cli-init vue init` 的运行效果将会跟 `vue-cli@2.x` 相同 vue init webpack my-project
- 项目搭建
- 第一步安装
npm install -g vue@cli
- 第二步创建项目文件
vue create project //项目的名称
- 第三部 选择快捷式安装配置
- 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个
- 第四步选择安装依赖
- 当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键 选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步
- 第五步 选择css预处理
- less和sass可以自行选择
- 第六步 选择自动化代码格式化检测
- 第七步是否保存刚才的配置,选择确定后你下次再创建新项目 就有你以前选择的配置了,不用重新再配置一遍了
- 第八步配置文件放哪
- 第一个是放在单独的文件配置
- 第二个是放在package.json文件
- 第九步是否将以上这些将此保存为未来项目的预配置
- 第十步 回车下载
- 第十一步启动项目
npm run serve
- 编译器(Compiler)
-
vue 3.0和2.0区别_浅谈vue3.0和vue2.0的区别
2020-12-12 03:00:33今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可维护能力开放更多底层功能其中前三点是最主要的变化...进入2020年,离vue3.0正式版发布的时间越来越近了。今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。
vue3的变化可以总结为以下几点:
- 更小
- 更快
- 加强typescript支持
- Api一致性
- 提高可维护能力
- 开放更多底层功能
其中前三点是最主要的变化。
更小:
vue2采用面向对象编程的思想,vue3则采用函数式编程的思想。
vue2源码中代码是这样组织的:
function vue(){...} vue.prototype.init = ...
vue3源码中是这样组织的:
//监听方法:function watch(){...} //渲染方法:function render(){...}
原因:充分利用函数式编程组合大于继承的优势,采用函数式编程更利于逻辑功能的复用,webpack打包时更有利于tree-shaking,更利于代码的压缩,更利于返回值类型校验,压缩后的文件体积更小。
更快:
vue3修改了虚拟dom的算法(即diff算法 - 比对虚拟dom有没有变化)
vue2需要diff所有的虚拟dom节点,而vue3参考了SVELTE框架的思想,先分层次-然后找不变化的层-针对变化的层进行diff,更新速度不会再受template大小的影响,而是仅由可变的内容决定。经过尤雨溪自己的测试,大概有6倍的速度提升。
加强typescript支持:
vue3的源码开始采用了ts进行编写,给开发者也提供了支持ts的开发模式。
Api一致性
vue3最开始的版本可以完美兼容vue2的api。
提高可维护能力
从源码的层面上提供了更多的可维护能力。
开放更多底层功能
把更多的底层功能开放出来,比如render、依赖收集功能,我们可以更好的进行自定义化开发,可以写更多的高阶组件。
最后我们再谈谈两者在数据双向绑定方面的区别。
数据双向绑定:
关于数据双向绑定的实现,vue2 采用了defineProperty,而vue3则采用了proxy。
优点:
- 使用proxy不污染源对象,会返回一个新对象,defineProperty是注入型的,会破坏源对象
- 使用proxy只需要监听整个源对象的属性,不需要循环使用Object.defineProperty监听对象的属性
- 使用proxy可以获取到对象属性的更多参数,使用defineProperty只能获取到监听属性的新值newvalue
/* vue2.0*/var a = { b:123, c:444};Object.defineProperty(a,'b',{ set: function(newvalue){ console.log('i am be set') }}) //只能获取到newvalue这个参数/* vue3.0 */var a={ b:123, c:444};var newa = new Proxy(a,{ set:function(target,key,newvalue){ console.log(target,key,newvalue) }}) //可以获取到target,key,newvalue三个参数
希望整理的这些内容对大家有所帮助。最后老K提前祝大家春节快乐!!!
本文为原创内容,若转载请注明出处,转发感激不尽。
-
Vue3.0和Vue2.0的区别
2020-02-13 15:39:07vue3.0和2.0的区别 Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观 vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快、更小、更易维护、更易于原生、让开发者更轻松...https://www.cnblogs.com/zdz8207/p/vue-3-2.html
vue3.0和2.0的区别
Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观
vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快、更小、更易维护、更易于原生、让开发者更轻松;
更快
1、virtual DOM 完全重写,mounting & patching 提速 100%;
2、更多编译时 (compile-time)提醒以减少 runtime 开销;
3、基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能;
4、放弃 Object.defineProperty ,使用更快的原生 Proxy;
5、组件实例初始化速度提高 100%;
6、提速一倍/内存使用降低一半;更小
1、Tree-shaking 更友好;
2、新的 core runtime:~ 10kb gzipped;
===============
3.0 新加入了 TypeScript 以及 PWA 的支持
部分命令发生了变化:
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
默认项目目录结构也发生了变化:
移除了配置文件目录,config 和 build 文件夹
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
安装
npm install -g vue@cli
创建项目文件:
vue create project //项目的名称====================
vue2和vue3的区别
一、常用命令
vue -V 查看本地 vue 版本二、官方文档
3.0:https://cli.vuejs.org/zh/三、创建文件
3.0:vue create 进入工程文件夹,创建项目。
2.0:vue init webpack四、启动项目
3.0启动npm run serve
2.0启动npm run devbuild没了、config没了、哦对了还有最重要的一点,3.0的安装项目时自动下载node-model。
在根目录下创建一个vue.config.js
module.exports = {
baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
devServer: {
port: 8888, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}, // 配置多个代理
}
}==================
Vue3.0和Vue2.0的区别一、默认进行懒观察(lazy observation)。
在 2.x 版本里,不过数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。二、更精准的变更通知。
比例来说:2.x 版本中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。三、3.0 新加入了 TypeScript 以及 PWA 的支持
四、部分命令发生了变化:
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve五、默认项目目录结构也发生了变化:
移除了配置文件目录,config 和 build 文件夹
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件 -
vue 3.0和2.0区别_迎接Vue3.0系列 | 初探Vue3中的Vue路由器怎么玩
2020-12-12 05:27:50这是迎接Vue3.0系列第四篇,其余三篇:迎接Vue3.0系列 | 如何在Vue3中使用生命周期钩子函数迎接Vue3.0 | 在Vue2与Vue3中构建相同的组件准备迎接Vue3,使用Vue Composition API生成干净可扩展的表单另外,私信发送... -
vue 3.0和2.0区别_vue-cli 2.0 自我升级 3.0 的一些坑
2020-12-04 12:33:12(更新) 之前没留意,原来我更新的是vue-cli4了,感谢评论里大大的提醒,我以下的过程是升级到了4的前几天在跟同事合作开发的时候,被迫用vue-cli3.0构建,最近终于闲下来学习了一下vue-cli3.0的简单构建。之前我是用... -
vue3.0和vue2.0的区别
2020-09-16 19:32:10vue3.0和2.0的区别 Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观 vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快、更小、更易维护、更易于原生、让开发者更轻松... -
vue 3.0和2.0区别_Vue/cli3.0 的一些小技巧
2020-11-25 04:50:19vue/cli3.0比起vue/cli2.*来说,最明显的区别就是简化了两个文件,一个是build文件和config文件。vue/cli3.0把这两个文件的配置写进了node_modules里面去了。不过有些时候我们也需要配置一些适合自己项目开发的东西... -
vue 3.0和2.0区别_Vue.js 2.0 快速上手精华梳理
2020-11-22 05:52:57自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。Vue基础对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件... -
vue 3.0和2.0区别_USB2.0, USB3.0和USB3.1区别
2020-12-11 08:25:43今天我们一起来认识一下USB和USB之间的区别。USB是什么?USB是“Universal Serial Bus”(通用串行总线)的缩写,是一类以即插即用为特点的高速传输标准,用作连接打印机、数码相机、摄像头、键盘及鼠标等。这一标准已... -
vue 3.0和2.0区别_通过Vue2.0源码理解vue生命周期
2020-12-12 04:53:31在vue2.0中,我们经常会看到下面这张生命周期图,本次结合源码来让大家对这张生命周期图有一个简要的了解。1.beforeCreate和created:src/core/instance文件夹为vue方法初始化的主文件夹,入口为index.js文件。在... -
vue 3.0和2.0区别_一文看懂 Vue.js 3.0 的优化
2020-12-03 12:04:12Vue.js 从 1.x 到 2.0 版本,最大的升级就是引入了虚拟 DOM 的概念,它为后续做服务端渲染以及跨端框架 Weex 提供了基础。Vue.js 2.x 发展了很久,现在周边的生态设施都已经非常完善了,而且对于 Vue.js 用户而言,... -
vue 3.0和2.0区别_vue-cli3.0 之 自我初体验
2020-11-27 23:28:32其实在2018年8月10号,vue-cli3.0就已经面世了,由于项目中应用的全是2.x版本,所以并不了解3.0的vue-cli发生了什么变化,那今天尝试了下遇见的问题,在此做个记录吧!问题一 :安装vue/cli哈哈哈 安装就出现了个... -
vue2.0和3.0区别_usb3.0和2.0有什么区别 usb3.0和2.0哪个好【详解】
2020-12-11 08:26:21都好在哪里,为什么大家都建议买usb3.0,看完下面三要素你就明白 usb3.0和2.0的区别 了。 1、数据传输 usb3.0 引入全双工数据传输。5根线路中2根用来发送数据,另2根用来接收数据,还有1根是地线。也就是说,usb ... -
vue 3.0和2.0区别_Vue.js 3.0 "One Piece" 发布
2020-12-12 05:30:09正文从这开始~~今天,我们非常自豪地宣布 Vue.js 3.0 "One Piece" 发布。本次主版本更新包含性能的改进,更小的 bundle 体积,对 TypeScript 更好的支持,用于处理大规模用例的全新 API,以及为框架未来的长期迭代... -
vue3.0和2.0数据绑定实现区别
2020-07-03 16:56:34以vue举例来说就是使用definedProperty中的get\set方法来完成数据劫持,之后在通过diff算法对比新老dom差异修改vdom,重新render完成渲染; 首先了解下definedProperty Object.defineProperty() 方法会直接在一个... -
vue3.0和vue2.0的区别有哪些,优点是什么
2021-02-02 23:17:57<p>vue3.0和vue2.0的区别有哪些,优点是什么</p> -
vue.3.0 dom赋值_浅谈vue3.0和vue2.0的区别
2021-01-30 14:58:19今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可维护能力开放更多底层功能其中前三点是最主要的变化... -
vue2.0和3.0区别_怎么区别usb2.0和3.0 usb2.0和3.0区别方法【图文详解】
2020-12-11 08:25:43还有usb3.0接口的,但是usb3.0u盘价格相对较高,使用的用户也相对较少,所以可能很多用户并不了解usb3.0与usb2.0的区别,下面u启动就为大家普及一下usb2.0与usb3.0区别,这样您要是使用u盘就知道怎么区别usb2.0和3.0... -
简说Vue3.0和Vue2.0的区别
2020-09-16 17:24:05默认进行懒观察(lazy ... 比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。 3.0 新加入了 TypeSc -
vue3.0 与 vue2.0 的区别
2020-09-28 21:22:02vue3.0移除了配置文件目录,config 和 build 文件夹 在 src 文件夹中新增了 views 文件夹,用于分类视图组件 和 公共组件 创建项目上: Vue create 项目名(3.0) Vue init webpack 项目名 (2.0) 启动项目上: npm... -
vue 3.0与vue 2.0的区别
2020-07-12 08:47:08vue-cli2.0的域名配置,分为开发环境和生产环境,所以配置域名时,需要在config中的dev.env.js和prod.env.js中分别配置 3.0 config文件已经被移除,但是多了.env.production和env.development