zoukankan      html  css  js  c++  java
  • 前端开发Vue.js—版本2与3区别

    最近部门开展了新同事的前端开发统一培训(后期还接着有后端培训、云计算培训,部门所有新人都要掌握~太难了),选了vue.js作为讲解,这里我自己找了博客进行提前了解。

    前言

    • 版本换代需要我们花更多的时间适应学习,但升级是为了更好,让你的前端项目更快更好更紧跟前端时代。

    vue2.0核心思想

    • Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动、组件系统。
    数据驱动:
    • Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: gettersetter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。
      watcher
    • watcher:每一个指令都会有一个对应的用来观测数据的对象,叫做watcher,比如v-text="msg", {{ msg }},即为两个watcherwatcher对象中包含了待渲染的关联DOM元素。
      基于依赖收集的观测机制原理:
    • 1、将原生的数据改造成 “可观察对象”,通常为,调用defineProperty改变data对象中数据为存储器属性。一个可观察对象可以被取值getter,也可以被赋值setter
    • 2 、在解析模板,也就是在watcher的求值过程中,每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者,并成为当前watcher的一个依赖。
    • 3、当一个被依赖的可观察对象被赋值时,它会通知notify所有订阅自己的watcher重新求值,并触发相应的更新,即watcher对象中关联的DOM改变渲染。
    组件系统:
    • 应用类UI可以看作全部是由组件树构成的。
      核心选项
    • 1、Template(模板)声明了数据和最终展现给用户的DOM之间的映射关系。
    • 2、data(初始数据)
    • 3、props(接受的外部参数)
    • 4、methods(方法)
    • 5、lifecycle hooks(生命周期钩子函数)
    • 6、assets(私有资源)
    最核心最优秀的来了
    • vue2.0为何可以从ag、react中杀出来,因为vue2.0允许将模板、样式、逻辑三要素整合在同一个文件中,以.vue文件后缀形成单文件组件格式,方便项目架构和开发引用。配以完善的中文文档,这简直太友善了,符合国内大多数前端开发的使用习惯。
    为何要升级呢?已经如此优秀了鸭?
    • 答案是: 因为有react优秀在前,如果vue2.0不能跟上这个优秀的框架还固步自封的话,必将没落。
    Vue2.0的缺点是他的敌人比他更加优秀。
    • 性能比react低。(低在dom渲染上,低在watcher的监听不如react设计得高效)
    • 打包文件没有react轻简。
    • 对未来必然流行的TS没有react支持得好
    • 等等等各方面都开始被react领跑,这就是为啥尤一要开发3.0的原因。

    Vue3.0的核心思想

    对比vue2.0的区别
    • 1、性能更比Vue 2.0强。
    • 2、打包更科学不再打包没用到的模块
    • 3、Composition API(组合API)
    • 4、Fragment, Teleport, Suspense
    • 5、更友好的支持兼容TS
    • 6、Custom Renderer API(自定义渲染API)

    我会挑几个讲一下,反正都是只知皮毛,各位可以自行深度学习。

    Composition API

    Fragment(碎片)

    • 你不用再必须用一个template标签包起整个组件,一个文本一个标签,多个tempate都可以。

    Teleport(传送门)

    Suspense(悬念)

    • 可在嵌套层级中等待嵌套的异步依赖项
    • 支持async setup()
    • 支持异步组件

    Custom Renderer API

    • 正在进行NativeScript Vue集成
    • 用户可以尝试WebGL自定义渲染器,与普通Vue应用程序一起使用(Vugel)。

    意味着以后可以通过 vueDom 编程的方式来进行 webgl 编程 。感兴趣可以看这里:Getting started vugel

    Vuex Router Cli

    • Vuex: 都别慌,尤一说了,Vuex的下一个版本目前还放不出来,vue3.0以目前的API为主去适配,所以暂时不会改动很大。
    • Router: 适应vue3的已经出来了,后续我也得去跟进学习下,项目里已经用了,但是改版的区别没仔细分析。
    • Cli 很超前的做了vue3的工作,目前项目可以直接用cli创建,非常感谢这些团队给我们这些小白减低了很大的学习难度
    链接:https://www.jianshu.com/p/ad38a1f27d0f
    Keep moving forwards~
  • 相关阅读:
    android AudioManager AUDIOFOCUS
    uboot环境变量实现分析
    观察者模式总结
    【BZOJ3270】博物馆 概率DP 高斯消元
    从零開始学android<TabHost标签组件.二十九.>
    怎样在Web项目中的service业务层获取项目根路劲
    TexturePacker 算法
    [leetCode 75] Sort Colors
    无人车可能导致器官捐献者短缺以及吸烟率下降:4星|《无人驾驶,十万亿美元的大饼怎么分?》
    如何寻找颠覆式创新的机会,《创新者的窘境》作者二十年磨一剑:4星|《与运气竞争》
  • 原文地址:https://www.cnblogs.com/-X-peng/p/15183962.html
Copyright © 2011-2022 走看看