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. python_的面向对象编程

    废话不多说,先弄个对象来看看 class Student(object): def __init__(self, name, score): self.name = name self.score = ...

  2. webstorm中使用sass

    最近由原来的sublime转为使用webstorm,用的不是很熟.我们在webstorm中使用sass 1.首先sass是基于ruby的.这个时候我们需要安装ruby. 2.安装成功后.我们需要去掉原 ...

  3. 记录在tiny6410平台上采用4GSD卡来启动uboot和烧写nand flash uboot

    下面这种方法是从网上转的 没有验证 环境:ubuntu 13.04一.首先制作sd启动盘: 插入SD卡    sudo dd iflag=dsync oflag=dsync if=tiny210v2- ...

  4. php window系统 xdebug+phpstorm 本地断点调试使用教程

    运行环境: phpStorm 2017.2 PHP 7.1.5 Xdebug 2.6.1 php.ini添加xdebug模块 你需要仔细分析和选择要下载的对应版本,否则无法调试.由于非常容易出错,建议 ...

  5. Linux 基础内容

    1.linux版本有:redhat(收费),centos,ubuntu,suse(开发使用) 2./目录下的:etc配置文件目录,media挂载点,opt第三方安装目录,boot启动文件,home家, ...

  6. Java爬虫模拟登录——不给我毛概二的H某大学

    你的账号访问太频繁,请一分钟之后再试! 从大一开始 就用脚本在刷课 在专业课踢的只剩下一门C#的情况下 活活刷到一周的课 大二开始教务系统多了一个非常**的操作 退课池 and 访问频繁缓冲 难道,我 ...

  7. tp剩余未验证内容-8

    模型类的自动验证? 分为自动验证, 和 动态验证(手工验证), 前者的验证规则是定义在模型类中的, 所以要自己创建 扩展的/继承的模型类, 同时用 D方法实例化模型类 而动态验证是 先调用 valid ...

  8. 缓存算法(FIFO 、LRU、LFU三种算法的区别)

    FIFO算法 FIFO 算法是一种比较容易实现的算法.它的思想是先进先出(FIFO,队列),这是最简单.最公平的一种思想,即如果一个数据是最先进入的,那么可以认为在将来它被访问的可能性很小.空间满的时 ...

  9. POJ 1743 Musical Theme(后缀数组 + 二分)题解

    题意:一行数字,定义如下情况为好串: 1.连续一串数字,长度大于等于5 2.这行数字中多次出现这串数字的相似串,相似串为该串所有数字同加同减一个数字,如 1 2 3 和 5 6 7 3.至少有一个相似 ...

  10. 安装完MySQL数据库设置密码

    对于windows平台来说安装完MySQL数据库后,系统就已经默认生成了许可表和账户,你不需要像在Unix平台上那样执行 mysql_install_db脚本来生成帐户和相应权限许可表.但是如果不是用 ...