面试题vue双向绑定原理_vue路由面试题

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

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

Jetbrains全系列IDE稳定放心使用

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

在这里插入图片描述

如图所示zuoerobject .defineProperty 方法给对象的属性动态加上setter和getter方法,外部获取和设置对象属性值时都会触发对应的getter,setter方法。
object .defineProperty 方法需要一个中间变量来作为返回值,否则的话set方法中直接给对象的属性设置值会无限的触发set方法陷入死循环。
vue就是在data对象中使用 object .defineProperty 方法,遍历属性给每一个属性设置setter和getter方法。每个组件实例都会对应一个Watcher实例,当setter方法触发时都会通知Watcher,从而重新渲染关联组件。这就是vue双向绑定的原理。注意object .defineProperty是ES5独有特性,这也是vue不支持IE8以及更低版本的原因。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

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


相关推荐

  • 达梦数据库同步部署方案「建议收藏」

    达梦数据库同步部署方案「建议收藏」达梦数据复制(DATAREPLICATION)是一个分担系统访问压力、加快异地访问响应速度、提高数据可靠性的解决方案。将一个服务器实例上的数据变更复制到另外的服务器实例。可以用于解决大、中型应用中出现的因来自不同地域、不同部门、不同类型的数据访问请求导致数据库服务器超负荷运行、网络阻塞、远程用户的数据响应迟缓的问题。

    2022年10月15日
    6
  • Pytest(16)随机执行测试用例pytest-random-order[通俗易懂]

    Pytest(16)随机执行测试用例pytest-random-order[通俗易懂]前言通常我们认为每个测试用例都是相互独立的,因此需要保证测试结果不依赖于测试顺序,以不同的顺序运行测试用例,可以得到相同的结果。pytest默认运行用例的顺序是按模块和用例命名的ASCII编码

    2022年7月29日
    7
  • Linux下性能监控工具介绍

    Linux下性能监控工具介绍

    2021年8月13日
    56
  • css动画和js动画的优缺点_彼得兔第三季动画片

    css动画和js动画的优缺点_彼得兔第三季动画片大家好,我是小丞同学,一名准大二的前端爱好者这篇文章将欢快的带你了解一下CSS和JS动画的差别愿你忠于自己,热爱生活引言讲到动画,当然是非常有意思的啦,你可以往上滑一下,看看上面的封面图,是不是相当的炫酷,以为我是代码写出来的吗?那当然不可能啊,我这么摸鱼,怎么会为了个封面图上号呢废话不多说,其实上面的动图用代码实现也不会很困难,这个图是用canva做出来的。本文主要讲以下这些内容浏览器渲染流程回流和重绘CSS动画JS动画两者对比

    2022年10月15日
    2
  • 微信小程序与php后端交互_微信小程序数据库放哪

    微信小程序与php后端交互_微信小程序数据库放哪这里简单介绍用php后台实现获取openid并保存到数据库;微信的登陆流程是这样的首先前端发送请求到服务器:wx.login({success:function(res){varcode=res.code;//发送给服务器的codewx.getUserInfo({success:function(res){varuserNick=res.userInfo.nickName;…

    2022年9月17日
    3
  • 面向对象之封装

    封装封装的定义隐藏对象的属性和实现细节,仅对外提供公共访问方式。封装的好处1.将变化隔离;2.便于使用;3.提高复用性;4.提高安全性;封装的原则1.将不需要对外提供的内容

    2022年3月29日
    47

发表回复

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

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