首页 > 其他分享 >vue 的双向绑定原理(vue 的响应式原理)流程

vue 的双向绑定原理(vue 的响应式原理)流程

时间:2023-06-13 17:46:30浏览次数:39  
标签:订阅 vue dep 绑定 添加 数组 原理 属性

一、原理

 

二、流程

第一步,“数据劫持”

vue 2.x 用 Object.defineProperty() 方法来实现数据劫持,为每个属性分配一个 订阅者集合的管理数组 dep

vue 3.x 用 ES6 的 Proxy 构造函数来实现数据劫持。

第二步,“添加订阅者”

在编译的时候在该属性的数组 dep 中添加订阅者

添加方式包括:v-model 会 添加一个订阅者,{{}} 也会,v-bind 也会,只要用到该属性的指令理论上都会。

第三步,“为 input 添加监听事件”

为 input 添加监听事件,修改值就会为该属性赋值,触发该属性的 set() 方法

在 set() 方法内通知订阅者数组 dep,订阅者数组循环调用各订阅者的 update() 方法更新视图

 

标签:订阅,vue,dep,绑定,添加,数组,原理,属性
From: https://www.cnblogs.com/le-fang/p/17478322.html

相关文章

  • vue3进阶——组件基础
    组件允许我们将UI划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构,这和我们嵌套HTML元素的方式类似,Vue实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。定义组件当使用构建步骤时,我们一般......
  • vue中computed的详细讲解
    1.定义    computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新2.用法    一般情况下,computed默认使用的是getter属性  3.computed的响应式依赖(缓存)1.computed的每一个计算属性都会被缓存起来,只要计......
  • Redis系列16:聊聊布隆过滤器(原理篇)
    Redis系列1:深刻理解高性能Redis的本质Redis系列2:数据持久化提高可用性Redis系列3:高可用之主从架构Redis系列4:高可用之Sentinel(哨兵模式)Redis系列5:深入分析Cluster集群模式追求性能极致:Redis6.0的多线程模型追求性能极致:客户端缓存带来的革命Redis系列8:Bitmap实现亿万级......
  • [ARM汇编]计算机原理与数制基础—1.1.2 二进制与十进制数制转换
    在计算机中,我们通常使用二进制数制来表示数据,因为计算机的基本电平只有两种状态:高电平(通常表示为1)和低电平(通常表示为0)。而在我们的日常生活中,我们习惯使用十进制数制。为了方便理解,我们需要掌握二进制与十进制之间的转换方法。二进制转十进制将二进制数转换为十进制数时,我们......
  • Vue项目优化
    一、代码层面优化(1)v-if和v-show区分使用场景v-if和v-show的区别区别v-ifv-show手段动态的向DOM树内添加或者删除DOM元素通过设置DOM元素的display样式属性控制显隐编译过程有一个局部编译/卸载的过程是简单的基于css切换编译条件初始条件为假,则什么也不......
  • vue WebUploader 分片上传
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。这次项目的需求:支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,ie8,ie9,Chrome,Firefox,360安全浏览器,并且刷新浏览器后仍然能够续传,重启浏览器(关闭......
  • Vue SSR
    1、概念【SSR的本质就服务端返回渲染好的html文档】vue在客户端将标签渲染成的整个html片段的工作在服务端完成服务端形成的html片段直接返回给客户端这个过程就叫做服务端渲染2、优缺点(1)优点更好的SEO​在SPA中是抓取不到页面通过Ajax获取到的内容SSR是直......
  • vue2 学习提纲
    手册慕课网-vue2手册:http://www.imooc.com/wiki/vuelesson/vueslot.html视频vue2.5入门https://www.imooc.com/learn/980echarts数据报表https://coding.imooc.com/learn/list/499.htmlVue+EChart4.0从0到1打造商业级数据报表项目vue2.6的版本2.快速入......
  • C++ 虚函数与动态绑定
    多态与动态绑定为了实现C++的多态,C++使用了动态绑定技术,该技术的核心是虚函数表(简称虚表)。类的虚函数表每个包含了虚函数的类都包含一个虚表,一个子类如果继承了包含虚函数的父类,那么这个类也拥有自己的虚表,例如classA{public:virtualvoidvfunc1();virtualv......
  • vue中watch监听
    1.对data中一般数据的监听,使用watch,回调有newValue和oldValue两个参数,当数据变化后触发watch:{/***data中数据的监听*@paramnewValue*@paramoldValue*/value:function(newValue,oldValue){alert('监听'+oldValue+'变为'+ne......