vue的双向绑定原理_vue的双向绑定原理及实现

vue的双向绑定原理_vue的双向绑定原理及实现前置:弟弟也是小白一个,看源码以小萌新角度分析可能适合一些跟我一样的小白去理解,有讲不对的请大佬多多海涵和指点首先我觉得理解vue双向绑定原理应该要有略懂一下发布订阅者模式,我略带过一下。与观察者模式不同的是,发布订阅者多了一个中间调度中心而已。下面给两个比较好的例子观察者模式:观察者(Observer)直接订阅(Subscribe)主题(Subject),而当主题被激活的时候,会触发(FireEvent)观察者里的事件(用网上比较好的例子,忘记作者链接了,如果打扰到您请联系我删了)。.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

前置:弟弟也是小白一个,看源码以小萌新角度分析可能适合一些跟我一样的小白去理解,有讲不对的请大佬多多海涵和指点

首先我觉得理解vue双向绑定原理应该要有略懂一下发布订阅者模式,我略带过一下。与观察者模式不同的是,发布订阅者多了一个中间调度中心而已。下面给两个比较好的例子

观察者模式:观察者(Observer)直接订阅(Subscribe)主题(Subject),而当主题被激活的时候,会触发(Fire Event)观察者里的事件(用网上比较好的例子,忘记作者链接了,如果打扰到您请联系我删了)。

1.png

2.png

大白话:
大概意思就是观察者(爸爸妈妈)订阅主题(宝宝的行为),一旦主题改变(宝宝发生了某个行为,比如说饿了),便会通知观察者里的事件(爸爸妈妈各自的行为去做某些事)。最常见就是你页面上的按钮事件,等你点击便会通知对应的方法。

发布订阅模式:订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Event Channel),当发布者(Publisher)发布该事件(Publish Event)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码(用网上比较好的例子,忘记作者链接了,如果打扰到您请联系我删了)。

3.png

4.png

大白话:

  1. 发布订阅者模式与观察者模式很像,但是区别的就是,缺少多个主题。
  2. 发布订阅者模式多了个调度中心,该调度中心主要收录不同的类型,比如说宝宝尿床了, 宝宝饿了
  3. 根据不同类型让不同订阅者去执行对应的方法,比如尿床了就让爸爸去洗裤子,饿了就让妈妈喂奶,vue就是用订阅发布模式实现的。

接下来就讲下vue的双向绑定原理,先喵一下这几个东西:

  1. observe
  2. watch
  3. Dep

observe: 在实例化时,先触发observe,递归地对所有data中的变量进行订阅,并且,每次订阅之前,都会生成一个dep实例。

dep(调度中心): 大白话解释就是一个容器,打比分你定义了一个data中定义了name属性,那就会有一个name的dep(调度中心), 主要作用就是存放watch实例,也就是你的html上用到name的地方的,{
{name}} v-modle:name 等等。

watch: 主要是用来更新模板的,但是值得注意的是每个变量引用的地方都会生成一个watch实例,{
{name}} v-modle:name 会生成两个, 这样当更新数据的时候dep会去循环调用watch实例的回调方法(更新html模板的方法)就行。

`D@J58N4IA@R{NAG}5(VJAD.jpg

看完这三个的作用后,我们看看是怎么关联起来去实现双向绑定的:

image.png

解析一下:observe 这个方法就是去递归data中的数据进行订阅,你可以看到在171行有个

  • let dep = new Dep();
    这个就是刚才所说的,每个属性都会添加一个dep调度中心;
    然后下面有个判断
  • if(Dep.target)
    主要是看Dep中target是否有值,target值存的是变量watcher实例,其实刚开始的时候,我没看懂这写法是怎么来的,不应该是new Dep后获取他的实例,然后设置target属性吗?
    后来早上查文档看到别的博主分享,才知道它是Dep的静态属性,只能通过Dep去修改值,实例化是改不了它的值的,这样也可以使得他是惟一

它的工作原理是这样的,我们在defineProperty的get事件被触发时会进行依赖收集(现在不明白依赖收集没关系),你会经常触发get事件,但我们现在指定——你如果想要拿到这块砖,只能从我手上取,而且我的手上经常是空的,当创建一个watcher时,就把这个watcher放到我的手上,然后告诉你,“嘿,可以拿了!”,这样你才能拿到,等你把依赖收集完了,我就把砖从手上扔掉,因此你虽然经常会触发get事件,但其实你什么都拿不到。

image.png

至于compiler的话,我想说下里面比较重要的一个方法,bindWatcherAndDep 和它中文意思差不多,就是绑定Dep与watcher的,其实就是在这里实例化watcher实例,绑定dep与watcher其实是在watcher这个类里面进行的,下面会讲

image.png

  • updateFn && updateFn(node, this.getDeepValue(exp))
    这也是第一次用vue.$data的内容去同步视图view中的信息,这不就是从model 到view的更新吗?这些更新函数可以被重复利用,这也是为什么选择把他们抽离出来的理由。第一次同步完成了,这时候vue.$data的信息就和view中的内容同步了。

接下来讲下watcher中是如何与dep联系起来的,先看代码

image.png

  • 主要是留意下141的代码
    this.value = this.getDeepValue();

这里不是去访问this.vm.$data的属性吗?这样不就是触发了属性的get方法了吗
当编译html代码时,我们碰到了一个需要收集的变量,现在为其创建一个watcher,并在watcher内部与dep建立联系。我们称这步为依赖收集,我们可以看到,在构造函数的最后一行,triggerDepCollection()意味这个watcher自己触发依赖收集,这个函数先把我们先前提到的Dep.target设为watcher自身,就是把自己作为一块砖头放在手上,然后getDeepValue()这里你只需要知道去访问了一次exp变量,这就触发了exp变量的get事件,就是提醒exp的dep,“你可以收集我了”,get事件的主要内容就是收集这个依赖,然后再结合最开始提到的代码,触发dep.depend(),收集依赖。

image.png

  • 说的比较乱,主要是想解释一下这几个东西的区别和作用,我们来总结下
    首先的话初始化的时候,递归vue中的变量数据,将它转为get,set。
  • get主要的作用是初始化该主题(属性)的一个调度中心dep,并往其中添加html上所有用到该的主题(属性)的依赖(watcher)
  • set 主要是去更新视图,当数据发生变化的时候,循环调用dep中的数组,去触发用到该主题(属性)的地方更新

至于什么时候收集到依赖,我个人理解是解析html文档的时候,遇到需要收集的变量,会在bindWatcherAndDep这里实例化一个watcher实例,在实例化的过程中,不是在构造函数上有this.triggerDepCollection()吗?triggerDepCollection()这个就会去执行获取一次data中的属性,就在这里调用了该属性的get方法,将依赖加到dep调度中心中。
小白见解,有说的不对的地方,请各位大佬海涵指点下我~

参考文章:

https://blog.csdn.net/swallowblank/article/details/107542882

前置:弟弟也是小白一个,看源码以小萌新角度分析可能适合一些跟我一样的小白去理解,有讲不对的请大佬多多海涵和指点

首先我觉得理解vue双向绑定原理应该要有略懂一下发布订阅者模式,我略带过一下。与观察者模式不同的是,发布订阅者多了一个中间调度中心而已。下面给两个比较好的例子

观察者模式:观察者(Observer)直接订阅(Subscribe)主题(Subject),而当主题被激活的时候,会触发(Fire Event)观察者里的事件(用网上比较好的例子,忘记作者链接了,如果打扰到您请联系我删了)。

1.png

2.png

大白话:
大概意思就是观察者(爸爸妈妈)订阅主题(宝宝的行为),一旦主题改变(宝宝发生了某个行为,比如说饿了),便会通知观察者里的事件(爸爸妈妈各自的行为去做某些事)。最常见就是你页面上的按钮事件,等你点击便会通知对应的方法。

发布订阅模式:订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Event Channel),当发布者(Publisher)发布该事件(Publish Event)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码(用网上比较好的例子,忘记作者链接了,如果打扰到您请联系我删了)。

3.png

4.png

大白话:

  1. 发布订阅者模式与观察者模式很像,但是区别的就是,缺少多个主题。
  2. 发布订阅者模式多了个调度中心,该调度中心主要收录不同的类型,比如说宝宝尿床了, 宝宝饿了
  3. 根据不同类型让不同订阅者去执行对应的方法,比如尿床了就让爸爸去洗裤子,饿了就让妈妈喂奶,vue就是用订阅发布模式实现的。

接下来就讲下vue的双向绑定原理,先喵一下这几个东西:

  1. observe
  2. watch
  3. Dep

observe: 在实例化时,先触发observe,递归地对所有data中的变量进行订阅,并且,每次订阅之前,都会生成一个dep实例。

dep(调度中心): 大白话解释就是一个容器,打比分你定义了一个data中定义了name属性,那就会有一个name的dep(调度中心), 主要作用就是存放watch实例,也就是你的html上用到name的地方的,{
{name}} v-modle:name 等等。

watch: 主要是用来更新模板的,但是值得注意的是每个变量引用的地方都会生成一个watch实例,{
{name}} v-modle:name 会生成两个, 这样当更新数据的时候dep会去循环调用watch实例的回调方法(更新html模板的方法)就行。

`D@J58N4IA@R{NAG}5(VJAD.jpg

看完这三个的作用后,我们看看是怎么关联起来去实现双向绑定的:

image.png

解析一下:observe 这个方法就是去递归data中的数据进行订阅,你可以看到在171行有个

  • let dep = new Dep();
    这个就是刚才所说的,每个属性都会添加一个dep调度中心;
    然后下面有个判断
  • if(Dep.target)
    主要是看Dep中target是否有值,target值存的是变量watcher实例,其实刚开始的时候,我没看懂这写法是怎么来的,不应该是new Dep后获取他的实例,然后设置target属性吗?
    后来早上查文档看到别的博主分享,才知道它是Dep的静态属性,只能通过Dep去修改值,实例化是改不了它的值的,这样也可以使得他是惟一

它的工作原理是这样的,我们在defineProperty的get事件被触发时会进行依赖收集(现在不明白依赖收集没关系),你会经常触发get事件,但我们现在指定——你如果想要拿到这块砖,只能从我手上取,而且我的手上经常是空的,当创建一个watcher时,就把这个watcher放到我的手上,然后告诉你,“嘿,可以拿了!”,这样你才能拿到,等你把依赖收集完了,我就把砖从手上扔掉,因此你虽然经常会触发get事件,但其实你什么都拿不到。

image.png

至于compiler的话,我想说下里面比较重要的一个方法,bindWatcherAndDep 和它中文意思差不多,就是绑定Dep与watcher的,其实就是在这里实例化watcher实例,绑定dep与watcher其实是在watcher这个类里面进行的,下面会讲

image.png

  • updateFn && updateFn(node, this.getDeepValue(exp))
    这也是第一次用vue.$data的内容去同步视图view中的信息,这不就是从model 到view的更新吗?这些更新函数可以被重复利用,这也是为什么选择把他们抽离出来的理由。第一次同步完成了,这时候vue.$data的信息就和view中的内容同步了。

接下来讲下watcher中是如何与dep联系起来的,先看代码

image.png

  • 主要是留意下141的代码
    this.value = this.getDeepValue();

这里不是去访问this.vm.$data的属性吗?这样不就是触发了属性的get方法了吗
当编译html代码时,我们碰到了一个需要收集的变量,现在为其创建一个watcher,并在watcher内部与dep建立联系。我们称这步为依赖收集,我们可以看到,在构造函数的最后一行,triggerDepCollection()意味这个watcher自己触发依赖收集,这个函数先把我们先前提到的Dep.target设为watcher自身,就是把自己作为一块砖头放在手上,然后getDeepValue()这里你只需要知道去访问了一次exp变量,这就触发了exp变量的get事件,就是提醒exp的dep,“你可以收集我了”,get事件的主要内容就是收集这个依赖,然后再结合最开始提到的代码,触发dep.depend(),收集依赖。

image.png

  • 说的比较乱,主要是想解释一下这几个东西的区别和作用,我们来总结下
    首先的话初始化的时候,递归vue中的变量数据,将它转为get,set。
  • get主要的作用是初始化该主题(属性)的一个调度中心dep,并往其中添加html上所有用到该的主题(属性)的依赖(watcher)
  • set 主要是去更新视图,当数据发生变化的时候,循环调用dep中的数组,去触发用到该主题(属性)的地方更新

至于什么时候收集到依赖,我个人理解是解析html文档的时候,遇到需要收集的变量,会在bindWatcherAndDep这里实例化一个watcher实例,在实例化的过程中,不是在构造函数上有this.triggerDepCollection()吗?triggerDepCollection()这个就会去执行获取一次data中的属性,就在这里调用了该属性的get方法,将依赖加到dep调度中心中。
小白见解,有说的不对的地方,请各位大佬海涵指点下我~

参考文章:

https://blog.csdn.net/swallowblank/article/details/107542882

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/180747.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 机顶盒知识详解_罗盘的知识与技巧

    机顶盒知识详解_罗盘的知识与技巧机顶盒定义数字视频变换盒(英语:SetTopBox,简称STB),通常称作机顶盒或机上盒,是一个连接电视机与外部信号源的设备;它可以将压缩的数字信号转成电视内容,并在电视机上显示出来;信号可以来自有线电缆、卫星天线、宽带网络以及地面广播。机顶盒接收的内容除了模拟电视可以提供的图像、声音之外,更在于能够接收数据内容,包括电子节目指南、因特网网页、字幕等等;使用户能在现有电视机上观…

    2022年10月24日
  • python suds_python suds 一坑

    python suds_python suds 一坑当被调用服务的返回xml内容值不是按照wsdl文件描述定义的,就莫名奇妙返回suds.WebFault没有更多详细信息!于是将源码解压,并插入到sys.path[0],通过设置断点的方式找出非标准的返回报文到底在说啥。从而调整对应参数。suds-0.4/suds/bindings/binding.py(246~268)defget_fault(self,reply):”””Extract…

    2022年10月23日
  • pycharm中使用anaconda部署python环境_如何创建lamp环境

    pycharm中使用anaconda部署python环境_如何创建lamp环境pycharm配合anaconda使用,在pycharm中选择anaconda创建的环境

  • Android audio_audiomack安卓版下载

    Android audio_audiomack安卓版下载音频基础知识声音有哪些重要属性呢?响度(Loudness)响度就是人类可以感知到的各种声音的大小,也就是音量。响度与声波的振幅有直接关系。音调(Pitch)音调与声音的频率有关系,当声音的频率越大时,人耳所感知到的音调就越高,否则就越低。音色(Quality)同一种乐器,使用不同的材质来制作,所表现出来的音色效果是不一样的,这是由物体本身的结构特性所决定的。

  • pycham2021版本激活码【在线破解激活】

    pycham2021版本激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • log4j pattern详解_log4j.additivity

    log4j pattern详解_log4j.additivity  在log4j的javadoc里面找到了所有的pattern,总结一下:%c输出类的名字,默认是输出全名,可以指定输出多少层次,比如%c{2}这样配置的话”a.b.c”是全类名,会输出”b.c”. %d用来输出log事件发生的时间。可以指定格式,比如:%d{yyyy-MM-ddHH:mm:ss}会输出2007-04-2620:12:03 %F   输出

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号