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. [macOS] error when brew updating

    I want to update the brew, then run brew update but unluckly, i got these error /usr/local/Library/b ...

  2. CentOS 7 DR模式LVS搭建

    调度器LB : 192.168.94.11 真实web服务器1 : 192.168.94.22 真实web服务器2 : 192.168.94.33 VIP : 192.168.94.111 脚本如下 ...

  3. 压缩图片 Image

    图片压缩 class resizeImg: """缩略图""" def __init__(self,**args): self.args_k ...

  4. 当SQL Server的实例位于集群的特定节点时,数据库无法远程访问

    搭建好了一个集群环境,发现当SQL Server的实例位于集群的其中一个节点时,数据库无法远程访问,报如下错误.但在另一个 节点时,数据库访问正常. 标题: 连接到服务器 -------------- ...

  5. docker overlay

    http://blog.csdn.net/jiangshouzhuang/article/details/52822125

  6. map的实际操作用并for_each遍历

    #include<iostream> #include<map> #include<algorithm> #include<string> using ...

  7. VMware安装步骤既常见问题

    一.vmware出问题? 可以使用vmvare的修复功能. 二.创建虚拟机 1)第一步:选择自定义下一步,典型里是都设定好了的. 2)第二步:选择12默认下一步 3)第三步:可以从光驱中安装,可以从文 ...

  8. Android活动和碎片的生命周期及addToBackStack()方法

    开始学了Android活动的生命周期后又到了碎片的生命周期,就开始有点乱了.又看了一些总结的文章有一个挺详细的:https://blog.csdn.net/lecepin/article/detail ...

  9. Git的初次使用

    一.配置本地Git库 1.下载安装好Git,并配置自己的信息. git config --global user.name"yourname"配置你的名称 git config - ...

  10. JVM运行时内存模型

    JDK1.7版本图 一,栈   基本数据类型的局部变量是直接保存在栈中. 栈帧:一个栈里面会包含多个栈帧,每一个栈帧代表一个方法的开始到结束,它涵盖了整个方法运行期间所有的操作和数据 栈帧 1:局部变 ...