精华内容
下载资源
问答
  • 今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可维护能力开放更多底层功能其中前三点是最主要的变化...
    4f4f3e1ebd6325b0c46244ae6014d99c.png

    进入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。

    优点:

    1. 使用proxy不污染源对象,会返回一个新对象,defineProperty是注入型的,会破坏源对象
    2. 使用proxy只需要监听整个源对象的属性,不需要循环使用Object.defineProperty监听对象的属性
    3. 使用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提前祝大家春节快乐!!!

    e94d914402eef723f154598ee1bd7ec9.gif

    本文为原创内容,若转载请注明出处,转发感激不尽。

    展开全文
  • Vue3.0和Vue2.0的区别

    万次阅读 多人点赞 2019-11-01 20:33:00
    Vue3.0和Vue2.0的区别 默认进行懒观察(lazy observation)。 在 2.x 版本里,不过数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染...

    Vue3.0和Vue2.0的区别

    1. 默认进行懒观察(lazy observation)。
      在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。
    2. 更精准的变更通知。
      比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。
    3. 3.0 新加入了 TypeScript 以及 PWA 的支持
    4. 部分命令发生了变化:
      • 下载安装 npm install -g vue@cli
      • 删除了vue list
      • 创建项目 vue create
      • 启动项目 npm run serve
    5. 默认项目目录结构也发生了变化:
      • 移除了配置文件目录,config 和 build 文件夹
      • 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
      • 在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
    展开全文
  • VUE3.0学习系列随笔(二):VUE3.0和VUE2.0工程结构对比 VUE3.0相对于VUE2.0的提升,最显著的特点在于:文件目录结构的优化。 1、VUE2.0初始工程结构 VUE2.0工程目录中存在构建工程配置目录、环境配置目录,静态资源...

    VUE3.0学习系列随笔(二):VUE3.0和VUE2.0工程结构对比

    VUE3.0相对于VUE2.0的提升,最显著的特点在于:文件目录结构的优化。

    1、VUE2.0初始工程结构

    VUE2.0工程目录中存在构建工程配置目录、环境配置目录,静态资源存放目录,以及各种功能配置文件,而且index.html主页也是存放于根目录之中,在加入个人配置的组件、页面和路由配置文件之后,工程结构会比较冗杂繁多。
    在这里插入图片描述
    VUE2.0不包含router工程压缩包下载地址:https://download.csdn.net/download/qq_26666947/14919793

    2、VUE3.0初始工程结构

    VUE3.0目录工程极大简化了项目结构,将修改频率极低的环境配置文件目录和构建工程文件目录做了封装和隐藏,并且增加一个public目录存放静态资源和主页。对于项目根目录下的各种配置文件也做了封装隐藏,整个项目工程结构更加简洁,可以使用户更加关注业务前端代码实现。
    在这里插入图片描述
    VUE3.0初始工程压缩包下载地址:https://download.csdn.net/download/qq_26666947/14909223

    3、添加router路由之后的VUE3.0工程目录结构

    在创建项目时,默认添加router路由之后,会在原工程目录结构之上增加router和store文件夹,并增加相应的路由配置文件index.js,并且增加views文件夹,主要是存放路由地址指向的vue文件。
    在这里插入图片描述
    添加router路由之后的VUE3.0工程压缩包下载地址:https://download.csdn.net/download/qq_26666947/14909263

    注意:如果是直接在初始目录中引入router包,需要按照以上目录格式,新增和相同命名文件名,才能保证项目运行正常,否则项目找不到相应路由。
    展开全文
  • vue3.0和vue2.0 vueAdmin模板 (vueAdmin-template) A minimal vue admin template with Element UI & axios & iconfont & permission control & lint. 具有Element UI,axios,iconfont,权限控制...

    vue3.0和vue2.0

    vueAdmin模板 (vueAdmin-template)

    A minimal vue admin template with Element UI & axios & iconfont & permission control & lint.

    具有Element UI,axios,iconfont,权限控制和lint的最小vue管理员模板。

    vueAdmin-template

    构建设置 (Build Setup)

    # Clone project
    git clone https://github.com/PanJiaChen/vueAdmin-template.git
    
    # Install dependencies
    npm install
    
    # serve with hot reload at localhost:9528
    npm run dev
    
    # build for production with minification
    npm run build
    
    # build for production and view the bundle analyzer report
    npm run build --report

    翻译自: https://vuejsexamples.com/a-vue2-0-minimal-admin-template/

    vue3.0和vue2.0

    展开全文
  • 前言 最近在整理Vue的一些内容,包括Vue 3.0新特性,Vue 2.0的一些特性以及实现方法,还有Vue全家桶的内容,涉及到的内容较多所以找...1Vue 3.0 Vue 2.0的对比 1.1Vue 3.0的新特性以及原理 1.1.1观察机制 简述:更完...
  • vue3.0和vue2.0 视点表 (vue-charts) Base on Vue2.0 wrapper for ChartJs -Vue js -Chart js -Work well with Laravel 基于ChartJs的Vue2.0包装器-Vue js-图表js-与Laravel配合使用 现场演示 (live demo) ...
  • vue3.0和vue2.0 pull2refresh (pull2refresh) alternatively pull down or pull up or both for Vue2.0 或者为Vue2.0拉低或拉高或两者兼而有之 A Vue.js project 一个Vue.js项目 现场演示 (Live demo) ...
  • 今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可维护能力开放更多底层功能其中前三点是最主要的变化...
  • vue3.0和vue2.0共存

    2020-12-14 13:17:36
    Vue3.0兼容Vue2.0 在vue 3.0 进行更新后,会覆盖掉2.0的版本,其中init 将不可以再进行使用,由于很多第三方插件都依赖于init 进行初始化,这时候如果使用的话会报错。 如何解决报错呢 只需要一行代码 即可兼容2.0 ...
  • <p>vue3.0和vue2.0的区别有哪些,优点是什么</p>
  • vue3.0和vue2.0的区别

    2020-09-16 19:32:10
    vue3.0和2.0的区别 Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观 vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快、更小、更易维护、更易于原生、让开发者更轻松...
  • vue3.0和vue2.0的比较

    2021-01-22 09:43:56
    vue3.0进行一次整理 目录: 一.vue3.0的亮点 1.性能比vue2.x快1.2~2倍 2.支持按需编译,按需导入,体积比vue2.x更小 3.支持组合API,类似React Hooks 4.更好的支持ts,因为他是ts写的 5.暴露了自定义渲染...
  • 默认进行懒观察(lazy ... 比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。 3.0 新加入了 TypeSc
  • 1.Vue2.0和Vue3.0响应式原理对比 1.1.Vue2.0响应式原理 Vue2.0中使用ES5中的Object.defineProperty方法实现响应式数据 const data = { name: 'hy', age: 18 } for(let i in data){ let temp = data[i] ...
  • VUE2.0和VUE3.0区别以及VUE-CLI移动端适配VUE2.0和VUE3.0区别1.项目目录结构2.配置项3.常用命令VUE-CLI移动端适配区别vue-cli2.0移动端适配vue-cli3.0移动端适配感谢 VUE2.0和VUE3.0区别 1.项目目录结构 1、vue-cli...
  • 这是迎接Vue3.0系列第四篇,其余三篇:迎接Vue3.0系列 | 如何在Vue3中使用生命周期钩子函数迎接Vue3.0 | 在Vue2与Vue3中构建相同的组件准备迎接Vue3,使用Vue Composition API生成干净可扩展的表单另外,私信发送...
  • Vue2.0和Vue3.0的区别

    千次阅读 2019-07-22 14:05:50
    Vue2.0 vue3.0 安装 npm install -g vue-cli npm install -g @vue/cli //原型开发(直接将.vue文件运行起来) npm install -g @vue/cli-service-global // 运行 vue serve ...
  • vue2.0和vue3.0的区别

    2021-03-26 16:26:18
    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...
  • vue3.0相对于vue2.0在项目结构上去除了buildconfig目录; 在vue2.0上配置proxy的方式,需要在config/index.js文件中直接修改就可以: proxyTable: { '/api':{ target:'http://localhost:8081/', changeOrigin:...
  • vue2.0中,我们经常会看到下面这张生命周期图,本次结合源码来让大家对这张生命周期图有一个简要的了解。1.beforeCreatecreated:src/core/instance文件夹为vue方法初始化的主文件夹,入口为index.js文件。在...
  • VUE2.0和VUE3.0的区别

    2021-01-07 19:42:25
    vue-cli2.03.0在目录结构方面,有明显的不同 vue-cli3.0移除了配置文件目录,config build 文件夹 同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中 ...
  • Vue3.0会在后续更新~~~~喜欢本文章的同学,记得三连哟看本文章的时候,带...说一下过程Vue3.0如何解决对数组对象的数据的响应式的?为什么要这样解决?优点是什么,缺点是什么?知道答案的同学,欢迎大家勇于评论...
  • Vue2.0升级到3.0或4.0创建Vue3.0

    千次阅读 2020-07-12 16:25:36
    Vue 2.0升级3.0和4.0 首先用npm uninstall vue-cli -g来卸载Vue2.0 再用npm install -g @vue/cli来下载Vue3.0或4.0 Vue3.0创建 1、 vue create 项目的名字 2、 按 ↓ 选择“Manually select features”,再...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 641
精华内容 256
关键字:

vue3.0和vue2.0

vue 订阅