模拟Vue 中数据双向绑定
时间:2019-09-29
本文章向大家介绍模拟Vue 中数据双向绑定,主要包括模拟Vue 中数据双向绑定使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、原理
如果使用Object.defineProperty,实现一个最简单的双向绑定其实很简单,只需如下:
|
|
上面这个demo就是vue双向绑定最简化的原理。
二、替换元素
想想我们使用vue时的规则
|
|
写上页面结构:
|
|
我们把Vue抽象为一个构造函数,传入这些值
|
|
替换掉节点中所有的双中括号里的内容:
|
|
这样就可以成功替换掉双中括号的内容:
三、绑定元素
上面我们只是替换了元素,但还没有实现绑定
实现数据绑定,就要用到definedProperty的set和get方法:
首先我们要给vue的所有属性都添加set和get方法:
|
|
再来明确我们要做的事,获取输入的值,改变Vue中相应的data的值,同时改变‘双中括号’中的值;
我们已经给data的每个属性都添加了get和set的方法,现在要做的就是如何触发它们。
触发它肯定是在赋值的时候,所以我们在有v-model属性的节点监听输入事件,同时赋值,触发set事件:
|
|
我们监听了input事件,接下来要获取输入的值并同步改变文本;
我们肯定希望只希望哪里改变了就对哪里做处理就行了,所以我们引入一个简单的发布——订阅组件:
|
|
在添加set和get的同时订阅事件:
|
|
添加一个方法,来在pubsub发出通知时处理事件,我们命名为watcher
|
|
这个watcher我们在什么时候添加呢?当然是在一开始的时候(compile里):
|
|
至此,便模拟了整个数据绑定的流程。
四、总结
最后理清整个过程的思路
创建Vue:
input事件:
源码在我的github仓库:https://github.com/lastnigtic/vue-bindData
原文:大专栏 模拟Vue 中数据双向绑定
原文地址:https://www.cnblogs.com/petewell/p/11607265.html
- 操作系统级虚拟化概述
- 让javascript中的异步请求同步起来
- [WCF REST] WebHttpBinding与消息编码
- React 概要
- [WCF REST] UriTemplate、UriTemplateTable与WebHttpDispatchOperationSelector
- [WCF REST] WebServiceHost有何特别之处?
- OSX SIP机制的“那些事”
- [WCF REST] 帮助页面与自动消息格式(JSON/XML)选择
- WCF服务端运行时架构体系详解[下篇]
- python和C语言混编的几种方式
- 通过“四大行为”对WCF的扩展[实例篇]
- 古中国数学家的计算力真是惊人
- 基于Apache Spark机器学习的客户流失预测
- 数据库连接字符串的处理方法!加密解密连接字符串。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- golang--连接redis数据库并进行增删查改
- golang--redis连接池
- springboot配置之使用application.properties时编码问题
- mybatis动态sql之foreach补充(二)
- golang数据结构之稀疏数组
- mybatis扩展之使用PageHelper插件进行分页(是真好用)
- 动态规划--0,1背包问题(再也不怕类似背包问题了)
- springboot配置之Profile多环境支持
- LeetCode | 102.二叉树的层次遍历
- golang数据结构之队列
- 动态规划--最长上升子序列(LIS)的长度
- golang数据结构之环形队列
- golang数据结构之单链表
- golang数据结构之双链表
- golang数据结构之循环链表