vue的双向数据绑定实现原理(简单)
如果有人问你,学vue学到了什么,那双向数据绑定,是必然要说的。
我们都知道,在vue中,使用数据双向绑定我们都知道是v-modle实现的。
实现原理是通过Object.defineProperty的方法实现的。
这个方法接收三个参数 obj
要在其上定义属性的对象。prop
要定义或修改的属性的名称。descriptor
将被定义或修改的属性描述符。
还有一些属性描述符
其中的俩个,
get:不存在该属性时返回undefined 当访问这个属性的时候执行 有值是返回传进来的prop。
set:不存在该属性时返回undefined 当属性变化时执行 方法接收唯一参数,就是prop的新属性值。
这个方法的使用我就不多说了。详细的可以看一下这个:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
理论:
双向数据绑定的原理就是劫持数据结合发布订阅者模式实现的。
步骤:
第一步:创建一个监听者,Observer,监听属性变化,当属性变化的时候,通知订阅者。
第二步:创建一个订阅者,watcher 用来接收属于变化的通知并且执行相对应的方法,然后更新视图view。
第三部,创建一个解析器,compile ,可以扫描和解析每一个节点相关指令,还可以,初始化模板数据,和初始化相关订阅者
图解:
(图片来源https://segmentfault.com/a/1190000006599500)
简单实现数据的双向绑定。
这是简单版的,后面会更新更详细的版本
vue的双向数据绑定实现原理(简单)的更多相关文章
- vue实现双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...
- vue的双向数据绑定实现原理
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 转 vue实现双向数据绑定之原理及实现篇
转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码: ...
- Vue的双向数据绑定的原理
Vue数据双向绑定的原理就是采用数据劫持结合发布者-订阅者模式,通过object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监 ...
- vue双向数据绑定的原理-object.defineProperty() 用法
有关双向数据绑定的原理 关于数据双向绑定的理解:利用了 Object.defineProperty() 这个方法重新给对象定义了新属性,在操作新属性分别为为获取属性值(调用get方法)和设置属性值(调 ...
- 面试题:你能写一个Vue的双向数据绑定吗?
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 详解 vue 双向数据绑定的原理,并实现一组双向数据绑定
1:vue 双向数据绑定的原理: Object.defineProperty是ES5新增的一个API,其作用是给对象的属性增加更多的控制Object.defineProperty(obj, prop, ...
- angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证
使用$http.$location.$watch及双向数据绑定等实现简单的用户登陆验证,记录备忘: 1.$http模拟从后台获取json格式的数据: 2.$watch实时监控数据变化: 3.$loca ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
随机推荐
- Nginx深入学习(一篇搞定)
我们的口号是:人生不设限! 一.nginx简介 1.什么是nginx Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx的并发 ...
- python自学之基础知识
python学习笔记 列表的添加拓展 列表的批量添加 用for循环可以批量添加 list=['李雷雷','韩梅梅',180,110] for i in rang(3): list.append(i) ...
- Visual C++线程同步技术剖析:临界区,时间,信号量,互斥量
使线程同步 在程序中使用多线程时,一般很少有多个线程能在其生命期内进行完全独立的操作.更多的情况是一些线程进行某些处理操作,而其他的线程必须对其处理结果进行了解.正常情况下对这种处理结果的了解应当在其 ...
- org.hibernate.LazyInitializationException异常解决办法
org.hibernate.LazyInitializationException异常failed to lazily initialize a collection...的解决方案使用hiberna ...
- xshell链接到Linux后启动和关闭tomcat
1.用xshell.链接到服务器 2.使用ps -ef|grep tomcat 3.停止tomcat服务,使用命令:systemctl stop adq-dses.service 4.再次查看tom ...
- 扯淡 Spring BeanDefinition
相关文章 Spring 整体架构 编译Spring5.2.0源码 Spring-资源加载 Spring 容器的初始化 Spring-AliasRegistry Spring 获取单例流程(一) Spr ...
- Python-使用tkinter实现的摇骰子小游戏
贴吧看到的一个求助题,大致需求是:3个人摇骰子,每人摇3次,点数之和最大的获胜,支持玩家名称输入.我觉得这个题目挺有意思的,做了个界面程序,欢迎大家交流指正~ #!usr/bin/env python ...
- flask的小错误
这几天刚学flask,根据录屏学代码的时候,遇到一个问题 基本能看懂错误,role_id是类的一个字段,应该是一个对象,最后发现是单词写错了,应该是大写的Column, db.Column(db.In ...
- C#几种单例模式
/** * 单例模式-饿汉式 */ public class Singleton { // 在定义的时候就初始化_instance, private static Singleton _instanc ...
- Python 字符串改变
在Python中,字符串是不可变类型,即无法直接修改字符串的某一位字符. 因此改变一个字符串的元素需要新建一个新的字符串. 常见的修改方法有以下4种. 方法1:将字符串转换成列表后修改值,然后用joi ...