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. linux----------今天又遇到一个奇葩的问题,就是linux文件的权限已经是777了但是还是没有写入权限,按照下面的命令就解决了

    查看SELinux状态: 1./usr/sbin/sestatus -v  ##如果SELinux status参数为enabled即为开启状态 SELinux status:             ...

  2. windows程序设计 加载位图图片

    现在网上随便下个jpg图片,用windows自带的画图工具打开,点击画图工具左上角,文件->另存为->选择bmp,点击保存,保存好后,就得到一张位图了. 得到的位图,位图的内存比原图片jp ...

  3. java项目打包成可运行的jar,main方法带参数

    转载 原文地址:http://www.cnblogs.com/neillee/p/6063808.html#commentform 将 java 项目打包成可运行的 jar 包(main 函数带参数) ...

  4. 使用hector-slam和Kinect V1建图

    一.建图实际操作 下载源码测试源码,depthimage_to_laserscan,参考https://blog.csdn.net/u010925447/article/details/5649468 ...

  5. WDCP面板Web环境安装redis与phpredis扩展应用方法

    http://www.ctyun.cn/bbs/thread-2882-1-1.html根据网友的要求需要在WDCP面板环境中安装人人商城程序,但是这个程序需要支持redis与phpredis扩展.根 ...

  6. kernel: INFO: task sadc:14833 blocked for more than 120 seconds.

    早上一到,发现oracle连不上. 到主机上,发现只有oracleora11g一个进程,其他进程全没了. Nov 14 23:33:30 hs-test-10-20-30-15 kernel: INF ...

  7. DataFrame数据转为list,再逐行写入Excel

    首先使用np.array()函数把DataFrame转化为np.ndarray(), 再利用tolist()函数把np.ndarray()转为list, 示例代码如下: # -*- coding:ut ...

  8. Weighted Quick Union

    Weighted Quick Union即: 在Quick Union的基础上对结点加权(weighted),在parent[i]基础上增加一个size[i]. 用来存储该结点(site)的所有子结点 ...

  9. https连接器

    非对称性加密:A生成一份公私钥,将公钥交给需要进行数据传输的B,B发送数据时先用公钥对数据进行加密,然后发送给A,再由A使用私钥进行解密. 但存在漏洞即B如何确认公钥是由A提供的.因此需要一个第三方机 ...

  10. luogu[愚人节题目3]现代妖怪殖民地 NTT

    U34272 [愚人节题目3]现代妖怪殖民地 fft 题目链接 https://www.luogu.org/problemnew/show/U34272 思路 虽然是个py题. ntt(或者fft)模 ...