vue双向绑定原理 面试_vue首屏加载优化

vue双向绑定原理 面试_vue首屏加载优化vue.js采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我…


Jetbrains全系列IDE稳定放心使用

vue.js采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

 

vue是通过Object.defineProperty()来实现数据劫持的。

Object.defineProperty( )可以来控制一个对象属性的一些特有操作,

比如读写权、是否可以枚举,这里我们主要描述 get和set,

 

可查看链接

https://www.cnblogs.com/libin-1/p/6893712.html

https://segmentfault.com/a/1190000006599500

 

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/180856.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • linux kworker进程占用cpu,为什么kworker cpu使用率如此之高?

    linux kworker进程占用cpu,为什么kworker cpu使用率如此之高?问题描述我最近在我的三星笔记本电脑和Windows7上安装了Ubuntu12.04。每当我使用Ubuntu(即使它闲置)时,kworker几乎占用了8核之一的90%。虽然它并没有真正影响我的使用,但它让我感到烦恼,我担心它可能会损害我的处理器。我甚至尝试安装另一个Linux发行版(LinuxMint),而kworker也引发了同样的问题。所以我不知道该怎么办。我将衷心感谢您的帮助。最佳解决方…

    2022年9月24日
  • SDIO接口WiFi驱动浅析[通俗易懂]

    SDIO接口WiFi驱动浅析[通俗易懂]SDIO-Wifi模块是基于SDIO接口的符合wifi无线网络标准的嵌入式模块,内置无线网络协议IEEE802.11协议栈以及TCP/IP协议栈,能够实现用户主平台数据通过SDIO口到无线网络之间的转换。SDIO具有传输数据快,兼容SD、MMC接口等特点。   对于SDIO接口的wifi,首先,它是一个sdio的卡的设备,然后具备了wifi的功能,所以,注册的时候还是先以sdio的卡的

    2022年10月4日
  • lua实例教程_lua教程网

    lua实例教程_lua教程网目录Lua配置、安装、与运行Lua编译与调试环境搭建Lua基本语法1.交互式编程2.脚本式编程Lua中的数据类型1.数据类型展示2.注意事项Lua中的变量全局变量局部变量非局部变量(先看闭包)(upvalue)(实际代指变量而非值)(第一类函数)变量值的交换Lua中的闭包(词法定界)…待续(持续更新中)参考与引用Lua配置、安装、与运行1.进入Lua官网:http://www.lua.org——下载Lua2.下载文件【lua-5.3.4_Win64bin.zip】3.创建一个空文件夹“Lua

    2022年10月21日
  • pycharm 2021 2.3 激活码【中文破解版】

    (pycharm 2021 2.3 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html00OE5RWT28-eyJsa…

    2022年3月30日
  • 设置页数自增页眉/页脚——Word中page域代码的使用

    设置页数自增页眉/页脚——Word中page域代码的使用本博文讲述如何在word中设置如图PageXofY格式的页眉/页脚,使其跟随页数自增首先添加页眉,选择好页眉样式。然后在页眉处写上:Page敲一下Ctrl+F9,会出现一对花括号:Page{}在其中填写“PAGE”,花括号外打上“of”:Page{PAGE}of再敲一下Ctrl+F9,在后面的花括号写上“sectionpages”Page{PAGE}of{sectionpages}退出页眉,按Alt+F9即可√(有时候要按两次)…

    2022年5月20日
  • GridView删除事件

    GridView删除事件首先:转摘一段GridView删除的文章RowDeleting和RowDeleted事件RowDeleting发生在删除数据之前,RowDeleted发生在删除数据之后。使用RowDeletin

    2022年7月3日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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