专栏首页萌兔itVue系列(一)——初识Vue.js

Vue系列(一)——初识Vue.js

Hello小伙伴们大家好,今天要开始Vue系列咯,那么就让我们一起走进Vue的世界吧~第一天让我们与Vue从相识开始。

01.Vue是什么

要问Vue是什么?官方的说法就是是一套用于构建用户界面的渐进式框架,只关注视图层, 采用自底向上增量开发的设计,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。感觉不太容易理解,我觉得翻译一下呢就是,用来写页面的一种框架,这种框架有这很简单的API能够帮助用户快速开发,然后使用MVVM的模式,使逻辑、视图分离的这么一个框架。

要说这框架好不好学,兔妞觉得,框架被编出来就是帮助开发者开发的,要是比原生的JavaScript还恶心,谁还用它了,你说是不是,所以定是较原生简单的。

Vue最主要的几个特点就是:

1)MVVM模式

2)双向绑定

3)虚拟DOM

02.MVVM模式

这个图就是一个MVVM的模型,View指的就是视图层,主要用于表现DOM节点;Model就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model;ViewModel就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象,它是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素,因此ViewModel的数据可以跟着view自动刷新,实现双向绑定。

03.双向绑定

那么什么又是双向绑定呢?双向绑定就是当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这样我们就不用再去为DOM绑定事件,再从而改变数据。那么这又是怎么实现的呢?Vue的双向绑定就是通过Object.defineProperty() 实现的,这个函数能够可以定义对象的属性相关描述符,从而劫持各个属性的setter,getter,在数据变动时,发布消息给订阅者,触发相应的监听回调。下图就是Vue中数据实现双向绑定的图示:

1)对Observer的数据进行递归遍历,从而加上getter及setter,从而通过Object.defineProperty()完成数据的监听。

2)通过Compile解析指令,来将模板中的变量转化为数据,并初始化渲染视图,并通过Updater添加更新指令对应节点的更新函数,从而添加数据订阅者,当数据变动时,订阅者收到通知,更新视图。

3)Wathcer:在自身实例化时,往属性订阅器(Dep)里面添加自己,并且自身拥有update()方法,当属性变动,dep.notice()通知时,就调用自身的update()方法,并触发Compile中绑定的回调

4)new MVVM是数据绑定的入口,整合Observer、Compile、Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁。

04.虚拟DOM

最后要谈的就是虚拟DOM了,这一点和React中是一样的。为什么要有虚拟DOM呢,因为在开发时,每次对DOM的操作都需要浏览器从构建树开始的整个流程,造成了极大地性能浪费,当DOM操作频繁时,甚至会造成卡顿,而虚拟DOM则不会马上操作DOM,而是将更新的diff内容存在本地,等更新完成后将最终的对象映射为真实DOM,并进行渲染。大家就先记住虚拟DOM能够极大提高性能就好,我们后面专门有一篇来讲虚拟DOM哦~~

本文分享自微信公众号 - 萌兔it(mengtu_it),作者:萌兔IT

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数据结构于JS也可以成为CP(五)链表

    Hello大家好~兔妞今天给大家带来的是链表哦!为什么有链表呢,因为数组并不总是组织数据的最佳数据结构。由于在JavaScript中数组是一个对象,所以js的数...

    萌兔IT
  • AngularJS vs Vue.js:对于两个流行前端框架的比较

    多年来,Web的前端开发经历了各种各样的发展,新框架不断的涌现。如您所想,为了保持竞争优势,框架都是东拼西凑来开发的。在当今的环境下,Angul...

    萌兔IT
  • 数据结构于JS也可以成为CP(七)散列

    Hello小伙伴们大家好~~今天带来的是散列,这个其实是一个很重要然而很多人不是很理解的技术。散列是什么呢,是一种数据存储技术,能够达到经过散列后的数据可以快速...

    萌兔IT
  • UIView中frame属性的内部实现

    UIView中用于表征视图在父视图中显示出来的位置和尺寸的属性是frame。 同时系统还提供另外两个属性center和bounds。其中center属性值描述视...

    欧阳大哥2013
  • SAP S/4 HANA新变化-主数据:业务伙伴之后台配置

    表结构的变化: 增加了一系列:BUT开头的表,其中BUT000存放BP: 一般数据,原来客户主数据一般视图存放的表KNA1也仍然使用,SAP会同时将客户主数据...

    SAP最佳业务实践
  • 【OCP最新题库解析(052)--题47】Which three are true about dynamic

    该系列专题为2018年4月OCP-052考题变革后的最新题库。题库为小麦苗解答,若解答有不对之处,可留言,也可联系小麦苗进行修改。

    小麦苗DBA宝典
  • MyLayout和XIB或SB的混合使用方法

    MyLayout是一个可以非常简单和方便的实现各种界面布局的第三方开源库。在我的github项目中大部分DEMO都是通过代码来实现界面布局的,但这并不是表示My...

    欧阳大哥2013
  • yaffs_guts(二)

    文件的Tnodes结构与object ? ? ?

    瓜大三哥
  • SpringMVC知识点梳理—够你面试掰活的(超详细)

    Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,通过把Model,View,Controller分离,将web层进...

    本人秃顶程序员
  • SpringMVC常见面试题总结(超详细回答)

    Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,通过把Model,View,Controller分离,将web层进...

    程序员小强

扫码关注云+社区

领取腾讯云代金券