代码编织梦想

vue的双向绑定原理

vue2的双向绑定原理

一、原理
vue2采用数据劫持结合发布者-订阅者模式的方法,通过Object.defineProperty()来劫持各个属性的setter和getter,当数据发生变化时通知订阅者,触发相应的回调,渲染更新视图
二、具体步骤
1、对于需要observer的数据,通过递归遍历,给它的所有属性(包括子属性)添加上setter和getter,以便数据发生变更时触发setter
2、compile解析编译模板指令,将模板中的变量替换为数据,初始化渲染页面视图,并给模板指令对应的节点绑定更新函数,添加订阅者,一旦数据有变化,接到通知触发回调
3、watcher订阅者是observer和compile之间的通信桥梁,主要办以下几件事:
a、在自身实例化过程中向属性订阅器(dep)中添加自己
b、自身必须有update()函数
c、当属性值发生变化时,收到dep.notice()通知,调用update()方法,触发complie中绑定的更新函数
4、MVVM作为数据绑定入口,整合observer、compile和watcher的关系,observer监听自己的model数据变化,compile解析编译模板指令,watcher是observer和compile之间的通信桥梁,实现 当model数据变化时,视图更新,视图交互变化时,model数据变化的双向绑定的效果

vue3为什么使用proxy代替Object.defineProperty

因为Object.defineProperty有如下弊端:
1、无法监听到对象属性的添加和删除
2、数组的API方法也无法监听
3、需要对每个属性进行遍历监听,如果是嵌套对象,则需要深层监听,影响性能
而proxy是:
1、劫持整个对象返回一个新对象,只操作新对象达到响应式
2、可以监听数组变化
3、proxy具有13种拦截方法,而Object.defineProperty()是不具有的

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42178670/article/details/128014151

面试题:vue双向绑定原理!-爱代码爱编程

引言:vue的双向绑定原理简单来说就是:vue内部使用object.defineProperty方法给所有数据加上getter和setter方法,在数据发生改变时发布消息给订阅者Watcher,触发响应的监听回调。 object .defineProperty是JS里一个重要的方法,vue的双向绑定ES6里一些方法都是靠它实现的。 如图所示zuoe

vue 的双向绑定原理-爱代码爱编程

目录 一、一句话描述 vue 的双向绑定原理 二、细说 vue 的双向绑定原理 1、vue 2.x 的双向绑定 2、vue 3.x 的双向绑定 3、一个完整的案例 一、一句话描述 vue 的双向绑定原理(vue 的响应式原理) vue 在实例化的时候,使用 Object.definePropery() 方法或 Proxy 构造函数,对 dat

Vue双向绑定原理(4改)-爱代码爱编程

  vue双向绑定是通过 数据劫持 结合发布者订阅者模式 的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;   通过watch来监听数据变化,当数据发生变化时,触发通知所有订阅该模式的对象进行数据更新。 补充:主要采用:数据劫持结合“发布-订阅”模式的方式,通过Object.defineProperty(

什么?vue居然不能动态监测对象的属性!-爱代码爱编程

写在前面的话 读者您好,本人目前同时在经营CSDN和微信公众号,希望小伙伴们能够给予支持,关注一下我的微信公众号,公众号是每天都会推送新文章,CSDN不定期发表新文章。 文末有公众号二维码,可以扫码关注,或者微信直接搜索“波波Tea”,带哪吒头像的那个就是我,谢谢!   1、背景 今天要讲的内容是Web前端框架vue.js中的一个细节,注意是细节

前端技巧|vue双向绑定原理,助你面试成功-爱代码爱编程

在面试一些大厂的时候,面试官可能会问到你vue双向数据绑定的原理是什么?有些小伙伴不知道是什么东西,这样你在面试官的眼里就大打折扣了。今天小千就来给大家介绍一下vue的双向绑定原理,千万不要错过啦。 vue双向绑定 大家其实对于这个问题不会很陌生,vue中采用mvvm的模式,内置vm将view层与model层两者进行关联,任何一方的变化都会让另外一方受

浅谈vue双向绑定的原理-爱代码爱编程

一、什么是双向绑定 我们先从单向绑定切入 单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新 双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定 举个栗子 当用户填写表单时,View的状态就被更新了,如果此

vue 双向绑定原理及依赖搜集的过程-爱代码爱编程

双向数据绑定机制: 官方:vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调。 第一步: 需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter,这样的话,给这个对象的某个

前端页面倒计时+自动跳转功能(setTimeout和setTimeInterval两种实现)-爱代码爱编程

setTimeout实现 <!-- 8秒倒计时 --> <p><span id="time"></span>秒后自动跳转到百度</p> <!-- js部分 --> function countDown(secs, url) { // secs--设置倒计时秒数,url--要跳转的链

箭头函数及其this指向-爱代码爱编程

箭头函数 1、只有一个参数的时候,参数可以不加小括号,没有参数或2个及以上参数的,必须加上小括号 2、返回语句只有一条的时候可以不写{}和return,会自动加上return的,返回多条语句时必须加上{}和return 3、箭头函数在返回对象的时候必须在对象外面加上小括号 箭头函数的this指向和普通函数的区别 1、普通函数this指向: 指向它的调

vue双向绑定原理-爱代码爱编程

** Vue双向绑定的原理 一、在讲vue双向绑定之前我们需要来了解下MVVM模式 MVVM(Model-View-ViewModel)是对 MVC(Model-View-Control)和 MVP(Model-View-Presenter)的进一步改进。 View:视图层(UI 用户界面)ViewModel:业务逻辑层(一切 js 可视为业

【vue双向绑定原理浅析】-爱代码爱编程

vue双向绑定原理浅析 1、什么是双向绑定? ​ 所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据。(数据变化更新视图,视图变化更新数据) 2、如何实现双向绑定? 在vue中可以通过v-model实现双向绑定 <template> <div id="a

带你看vue双向绑定原理-爱代码爱编程

前置:弟弟也是小白一个,看源码以小萌新角度分析可能适合一些跟我一样的小白去理解,有讲不对的请大佬多多海涵和指点 首先我觉得理解vue双向绑定原理应该要有略懂一下发布订阅者模式,我略带过一下。与观察者模式不同的是,发布订阅者多了一个中间调度中心而已。下面给两个比较好的例子 观察者模式:观察者(Observer)直接订阅(Subscribe

让浮动元素居中的几种方法_weixin_42178670的博客-爱代码爱编程

让浮动元素居中的几种方法 方法一: 给浮动元素外层包裹一个div,这个div和浮动元素宽度一致,然后对这个div设置margin: 0 auto; -------html------- <div class="container-layout"> <div class="content clearfix">