Vue在初始化的时候,会有两个大步骤:

1、Compile

从root的节点开始编译,根据正则表达式,把特殊的v-*类的标签,全部转换成对应的内存中的object

2、Observe

全部的data,observer所有的属性。 针对每个属性,做一个pub/sub结构,这样每次属性变化,可以通知到他们。

比如 <input type="text" v-model="xxx" />

它的双向绑定有2个过程:

1、text内容变化, 通知data变更

  这个比较简单理解,在compile的过程中,针对text增加addeventlistener,有变化事件,更新data值

2、data属性值变化, 通知text更新内容

  Observer阶段,针对每个data的属性,都闭包一个 Sub对象;

  Compile阶段,把textnode和data,通过Watcher联系起来。 Watcher内部,一方面触发data,把自己放入sub中;另一方面,约定好update接口。

参考:http://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension

vuejs的双向绑定实现原理的更多相关文章

  1. Vue2.0源码阅读笔记--双向绑定实现原理

    上一篇 文章 了解了Vue.js的生命周期.这篇分析Observe Data过程,了解Vue.js的双向数据绑定实现原理. 一.实现双向绑定的做法 前端MVVM最令人激动的就是双向绑定机制了,实现双向 ...

  2. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  3. Vue2.0实现双向绑定的原理

    一.几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input.textare等)添加了change(in ...

  4. vue数据双向绑定的原理、虚拟dom的原理

    vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...

  5. 最近老是有兄弟问我,Vue双向绑定的原理,以及简单的原生js写出来实现,我就来一个最简单的双向绑定,原生十行代码让你看懂原理

    废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...

  6. vuejs数据双向绑定原理(get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  7. Vue实现双向绑定的原理以及响应式数据

    一.vue中的响应式属性 Vue中的数据实现响应式绑定 1.对象实现响应式: 是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集 ...

  8. Vue双向绑定实现原理demo

    一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  9. 视图模板引擎——Vue【双向绑定】原理剖析

    首先我们来了解一下MVC.MVP.MVMM这三大架构模式在前端角度上的理解. MVC分别是 Model(模型).View(视图).Controller(控制器)三个模块.View(视图层)最主要完成前 ...

随机推荐

  1. php判断手机段登录,以及phpcms手机PC双模板调用

    首先一段php代码判断是否为手机浏览: function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP ...

  2. easy ui datatimebox databox 当前时间

    databox  当前日期: class="easyui-datebox" var curr_time = new Date(); var strDate = curr_time. ...

  3. OpenStack-RabbitMQ-获取vm、磁盘、网络设备的状态变化

    需求 及时知道vm,硬盘,镜像,网络设备.负载均衡器状态变化 分析 Dashboard中也是通过定时使用ajax调用API来获取虚拟机的状态信息的定时轮训的方式过于被动 解决方案 共用rabbitmq ...

  4. Practical Lessons from Predicting Clicks on Ads at Facebook

    ABSTRACT 这篇paper中作者结合GBDT和LR,取得了很好的效果,比单个模型的效果高出3%.随后作者研究了对整体预测系统产生影响的几个因素,发现Feature(能挖掘出用户和广告的历史信息) ...

  5. Android项目第一天,下载安装Android Studio和“我的第一个安卓项目”

    一.AS的下载我是在AS官方网站进行下载的最新版本,如图所示 二.AS的安装过程 点击你下载的安装包安装即可,傻瓜式一站到底. 到这一步时选择第二个按钮, 随后出现如下界面 这个窗口是提示我们设置代理 ...

  6. SliverList , SliverFixedExtentList

    SliverList 高度自动, SliverFixedExtentList 高度固定死. CustomScrollView( slivers:[ SliverList( delegate: Sliv ...

  7. Linux 查看磁盘读写速度IO使用情况

    # 查看io进程 命令:iotop 注:DISK TEAD:n=磁盘读/每秒              DISK WRITE:n=磁盘写/每秒. 注:标黄的可查看磁盘的读写速率,下面可以看到使用的io ...

  8. dataguard从库删除归档的例子

    deletearchlog.sh #!/bin/sh export PATH TABLE='v$archived_log' sqlplus -silent "/ as sysdba" ...

  9. onblur 事件

    onblur 事件 Event 对象 定义和用法 onblur 事件会在对象失去焦点时发生. 语法 onblur="SomeJavaScriptCode" 参数 描述 SomeJa ...

  10. eclipse Oxygen2 4.7.2版本安装activiti插件,并兼容svn插件

    附录,插件下载:链接:https://pan.baidu.com/s/138ChoXao1fALBzdOhJjdQg 密码:06fx 安装方法: 解压eclipse安装包,将eclipse-activ ...