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_WSGI接口

    WSGI:Web Server Gateway Interface WSGI接口定义非常简单,它只要求Web开发者实现一个函数,就可以响应HTTP请求.我们来看一个最简单的Web版本的“Hello, ...

  2. 说一说javascript的异步编程

    众所周知javascript是单线程的,它的设计之初是为浏览器设计的GUI编程语言,GUI编程的特性之一是保证UI线程一定不能阻塞,否则体验不佳,甚至界面卡死. 所谓的单线程就是一次只能完成一个任务, ...

  3. Linux文件系统的硬连接和软连接

    title: Linux文件系统的硬连接和软连接 date: 2018-02-06T20:26:25+08:00 tags: ["文件系统"] categories: [" ...

  4. ReportViewe调用Reporting Services报表时报错Session超时

    序列化问题加上[Serializable]即可 /// <summary> /// 报表身份授权重写 /// </summary> [Serializable] public ...

  5. winform中的dateTimePicker控件设置默认值为空

    winform中的dateTimePicker控件设置默认值为空   第一步:设置Format的属性值为“Custom” 第二步:设置CustomFormat的属性值为空,需要按一个空格键

  6. inux下输入ifconfig命令,没有eth0,怎么解决

    用ifconfig命令,只有lo,没有eth0的解决方案 问题描述:视频中输入ifconfig命令,显示eth0和lo,但是自己在虚拟机中并非得到这样的结果,而是只有lo,即网卡未启动,也没有ip,无 ...

  7. rangeOfString 和 containsString 兼容iOS7处理

    //查找字符串是否包含"心" NSString *str = @"每天都有好心情"; if ([str containsString:@"心" ...

  8. Jira和Confluence备份恢复

    jira和confluence备份 备份脚本: #! /bin/bash echo "########################################"   TIM ...

  9. centos7 install nginx+fastdfs

    说明:centos7单机部署 nginx fastdfs ## 创建一下目录作为存储数据图片的路径 可以自己定义 mkdir -pv /data/application/{storage,tracke ...

  10. 【做题】SDOI2017硬币游戏——方程&概念处理

    原文链接 https://www.cnblogs.com/cly-none/p/9825339.html 题意:给出\(n\)个长度为\(m\)的互不相同的01串.有另一个串,初始为空.不断进行如下操 ...