vue 双向绑定原理及依赖搜集的过程「建议收藏」

vue 双向绑定原理及依赖搜集的过程「建议收藏」双向数据绑定机制:官方:vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调。第一步:需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter,这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步:compile解析模板令,将模板中的变量替换成数据.然后初始化渲染页面视图,并将每个令对

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

Jetbrains全系列IDE稳定放心使用

双向数据绑定机制:
官方:vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调。
第一步:
需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter,这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
第二步:
compile解析模板令,将模板中的变量替换成数据.然后初始化渲染页面视图,并将每个令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:
Watcher订阅名是 observer和 Compile之间通信的桥梁,主要做的事情是:
1.在自身实例化时往属性订倒器(dep)里面添加自己
2.自身必须有一个 update()方法
3.待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中定的回调,则功成身退
第四步:
MVVM作为数据绑定的入口,合 observer、 Compile和 Watcher三者,通过 Observer来监听自己的model数据変化,通过 Compile来解析编译模板指令,最终利用 Watcher搭起 Observer和 Compile之间的通信标梁,达到数据变化->视图更新新:视图交互变化(Input)->数据mode变更的双向绑定效果。
自己理解:
1单项绑定过程(自己总结的):变量变了,由set发通知给watcher,watcher告知虚拟DOM树,叫它该比较了,我这有值变了,于是生成新的dom树进行一个比较,然后逐级分类比较,比较出哪个元素发生变化就把这个元素更新到页面,这就是单项数据绑定原理。

​ 2. v-model原理其实就是给input事件绑定oninput事件 就会立刻调用底层对象对应的setter方法 改变data里的属性的值 从而实现双向数据绑定

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

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

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

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

(0)


相关推荐

  • Excel之VBA简单宏编程

    Excel之VBA简单宏编程Excel之VBA简单宏编程excel是一款很经典的数据分析的工具,里面包含了很多内置函数,但实际情况有时却复杂得多,而excel的宏编程提供了自定义函数的功能,正好有老师需要帮忙做一些数据分析,就学习了一下,下面是我的学习笔记。本人使用的是excel2013。有出入的地方可以参考。Excel之VBA简单宏编程1、准备工作2、VBA编程2.1模块声明2.2变量声明及赋值2…

  • 数组求和方法汇总_用函数的方法对输入的数组求和

    数组求和方法汇总_用函数的方法对输入的数组求和vararr=[1,2,3,4,5,6];测试时我不想过度使用全局变量影响命名空间,所以没使用未声明变量。而是直接通过私有作用域设置静态私有变量,也可以用其他设计模式来限定变量作用域。因为数组对象的迭代方法也是一种遍历,所以也可以借助用来实现求和。一、利用数组对象的各迭代方法:1.array.every()查询是否有所有项都匹配的方法:1(function(){…

  • harbor

    harbor

  • php ueditor 后台配置项返回格式出错,上传功能将不能正常使用!

    php ueditor 后台配置项返回格式出错,上传功能将不能正常使用!

    2021年10月11日
  • 使用Windows Live Writer 常见的几个Blog接口

    使用Windows Live Writer 常见的几个Blog接口Pjblog:MovableTypehttp://你的Blog根目录/xmlrpc.aspi170:MetaWeblogAPIhttp://www.i170.com/user/你的i170的用户名Blogbus:Blogger       http://rpc.blogbus.com/bloggermydonews:htt

    2022年10月19日
  • RewriteRule指令[通俗易懂]

    RewriteRule指令[通俗易懂]作为RewriteRule指令的第三个参数。Flags是一个包含以逗号分隔的下列标记的列表: ‘last|L'(最后一个规则last)立即停止重写操作,并不再应用其他重写规则。它对应于Perl中的last命令或C语言中的break命令。这个标记可以阻止当前已被重写的URL为其后继的规则所重写。举例,使用它可以重写根路径的URL(‘/’)为实际存在的URL,比如,’/e/w

发表回复

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

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