Vue - 你知道Vue2中对象动态新增属性,视图无法更新的原因吗

难度级别:中高级及以上                               提问概率:55% 


这道题面试官会这样描述,比如有这样一个场景,一个对象里有name属性,可以正常显示在页面中。但后续动态添加了一个age属性,通过调试打印发现对象里的age属性已经添加了上了,但试图中却没有展示出来,请你说一说原因。

在Vue项目中一旦发现试图没有更新,首先要排查的就是数据是否已更新,不过本题已经帮助排查过了,那么问题很可能出现在Vue针对数据变更的响应式监听上。在Vue组件中,我们会提前定义一些data数据依赖,Vue在做初始化双向数据绑定的时候,会针对数据依赖的属性进行响应式监听,然后通过Vue指令将template模板中的变量与data数据依赖绑定起来,主要核心原理使用的就是Object的defineProperty方法。那么回归到本题上,响应式监听核心代码就像这样

Javascript代码:
<script>
cosnt people = {name: '张三'};Object.defineProperty(people, 'name', {
get() 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/600715.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pytest的时候输出一个F后面跟很多绿色的点解读

使用pytest来测试pyramid和kotti项目&#xff0c;在kotti项目测试的时候&#xff0c;输出一个F后面跟很多绿色的点&#xff0c;是什么意思呢&#xff1f; 原来在使用pytest进行测试时&#xff0c;输出中的“F”代表一个失败的测试&#xff08;Failed&#xff09;&#xff0c;而…

C#+net微信预约挂号系统源码,掌上医院挂号,在线缴费、检查、检验报告,住院服务

微信公众号预约挂号系统、支付宝小程序预约挂号系统主要是让自费、医保患者在手机上就能实现就医全过程&#xff0c;实时预约挂号、自费、医保结算&#xff0c;同时还可以查询检查检验报告等就诊信息&#xff0c;真正实现了让信息“多跑路”&#xff0c;让群众“少跑腿”。系统…

MySQL 底层数据结构 聚簇索引以及二级索引 Explain的使用

数据结构 我们知道MySQL的存储引擎Innodb默认底层是使用B树的变种来存储数据的 下面我们来复习一下B树存储 B树存储 哈希存储的区别 哈希存储,只能使用等值查询 B树与B树存储 我们知道B树实际上就是B树的变种 那么为啥使用B树而不是使用B树呢? 我们知道效率的高低主要取决于…

JUC基础

1.JUC概念 JUC是文件Java官方文档下面的java.Util下面的工具包。作用于多线程&#xff0c;内容有lock锁&#xff0c;以及callable等内容。JDK官方文档路径。基础多线程不了解可以看多线程子线程结束&#xff0c;执行主线程 2.线程、进程 1.进程&#xff1a; 一个程序是线程…

Python第四次作业

周六&#xff1a; 1. 找出10000以内能被5或6整除&#xff0c;但不能被两者同时整除的数&#xff08;函数&#xff09; def find_number():for number in range(0,10000):if number % 5 0 or number % 6 0:if number % 5 ! number % 6:ls.append(number)print(ls)ls [] fin…

如何快速摸清一个行业?

作为一名职场人&#xff0c;或多或少都会遇到需要了解自己不熟悉的行业&#xff0c;比如&#xff1a; 职业选择&#xff0c;跳槽换工作时&#xff1a;哪家企业所在的行业有优势&#xff0c;未来会有更多的机会&#xff1f;哪个行业给的薪资会更高&#xff1f;行业内当下及未来的…

MATLAB | 怎样绘制更有立体感的柱状图

之前写了一篇文章说明了MATLAB图例可以自己diy&#xff0c;这次又有了diy的机会&#xff0c;我开发了一个简单的小工具&#xff0c;能够实现绘制伪3d的柱状图&#xff0c;大概效果如下&#xff1a; 使用说明 由于涉及的代码比较接近MATLAB底层的图形对象&#xff0c;有点东西还…

Qt使用iostream的cout

在QT想使用iostream的cout。 参考以下博客&#xff1a; &#xff08;转载&#xff09;Qt中使用cout输出的方法 pro里加上; CONFIG console勾选 Run in Terminal clean工程&#xff0c;重新构建 上面是cout的&#xff0c;下面是我的另一个函数的qDebug输出的。

Set及其实现类与常用方法

1.Set及其常用实现类 Set接口是java.util.Collection接口的子接口.用来存储一个一个的数据.后面学习到的Map接口则用来存储key-value键值对. Set : 存储无序的,不可重复的数据|----->HashSet : 主要实现类 : 底层使用的是HashMap,即使用数组单向链表红黑树来存储。|-----&…

数据挖掘及其近年来研究热点介绍

&#x1f380;个人主页&#xff1a; https://zhangxiaoshu.blog.csdn.net &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️&#xff0c;如有错误敬请指正! &#x1f495;未来很长&#xff0c;值得我们全力奔赴更美好的生活&…

如何实现异地公网环境访问本地部署的支付宝沙箱环境调试支付SDK

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

OpenHarmony实战:轻量系统STM32F407芯片移植案例

介绍基于STM32F407IGT6芯片在拓维信息Niobe407开发板上移植OpenHarmony LiteOS-M轻量系统&#xff0c;提供交通、工业领域开发板解决方案。 移植架构采用Board与SoC分离方案&#xff0c;使用arm gcc工具链Newlib C库&#xff0c;实现了lwip、littlefs、hdf等子系统及组件的适配…