vue.js是通过数据劫持的方式实现数据的双向绑定的,其中过程如下:

当把一个JavaScript对象传给Vue实例的data选项时,Vue会遍历此对象的所有属性并使用 Object.defineProperty(),把这些属性全部转化为 getter/setter 。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的时候把属性记录为依赖,之后当依赖的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。因此,每当数据变化的时候会引起视图的变化,更新view。

因为Vue在初始化实例时会对属性进行 getter/setter 转化,这样,被转化的属性就是 响应式的,而只有在data中声明的属性会执行这个过程。所以,后续通过JavaScript传过来的对象属性因为没有在 data 中声明,所以并不会执行这个转化过程,因此这些属性全都是 不响应式的。

也是因为这个原因,现在的 Vue.js 无法监听到对象属性的添加和删除,也无法检测到数组的变动。

我个人在解决这个报错问题的时候是通过将报错的属性名在 data 中先进行初始化声明,后续给对象赋值的时候再进行覆盖的方式。但是这种方式治标不治本。个人建议还是使用全局的方式进行声明。

推荐以下博文,讲解非常的详细。https://www.cnblogs.com/linsx/p/9181237.html

Vue数据检监测问题的更多相关文章

  1. vue数据变动监测

    原文链接:https://blog.csdn.net/man_tutu/article/details/72148362 对象: 不能监测到: var vm = new Vue({ data:{ a: ...

  2. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  3. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  4. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  5. 由自定义事件到vue数据响应

    前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般用于项目中的一些通知机制.最近正好看到了这部分,就一起看了下自定义事件不同的实现,以及vue数据响应的基 ...

  6. Vue 数据响应式原理

    Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...

  7. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  8. vue数据传递--我有特殊的实现技巧

    最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围.所以简单的写一下.同时有一种特殊的实现方案. 有这么几种数据传递方式,vue ...

  9. vue数据双向绑定的原理、虚拟dom的原理

    vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...

随机推荐

  1. 两种方法设置MMDVM静态组

    方法一.进入BM页面设置静态组 1.仪表盘配置页面点击下图所示进入BM 2.或是点击链接进入https://brandmeister.network 3..进入页面后点击My hotspots,显示你 ...

  2. jenkins 添加用户管理权限

    一.前言 小组开会通知 想把jenkins 构建的权限给开发,这样的话效率会增加.运维也不必每次帮助开发去构建发布. 1.规划 jenkins 四个项目分别对应三个人负责.项目下的只负责 CI.UAT ...

  3. mysql常见聚合函数

    count():总数量avg():平均数std():标准差sum():求和max():最大值min():最小值 上面的不过多介绍group_concat():分组列值全部展示到一行eg:mysql&g ...

  4. laravel clone后需要做的操作

    首先 安装依赖关系 composer install 第二步 复制配置文件 cp .env.example .env 第三步 创建新的应用程序密钥 php artisan key:generate 第 ...

  5. Github上可以涨薪30k的Java教程和实战项目终于可以免费下载了

    写在前面 大家都知道 Github 是一个程序员福地,这里有各种厉害的开源框架.软件或者教程.这些东西对于我们学习和进步有着莫大的进步,所以我有了这个将 Github 上非常棒的 Java 开源项目整 ...

  6. 凭这份pdf让我轻松拿下了蚂蚁金服、字节跳动、小米等大厂的offer

    关于程序员,除了做项目来提高自身的技术之外,还有一种提升自己的专业技能就是:多!看!书! 小编整理出一篇Java进阶架构师之路的核心知识,同时也是面试时面试官必问的知识点,篇章也是包括了很多知识点,其 ...

  7. 13.Django-分页

    使用Django实现分页器功能 要使用Django实现分页器,必须从Django中导入Paginator模块 from django.core.paginator import Paginator 假 ...

  8. 附015.Kubernetes其他技巧

    一 优化镜像源 1.1 国内镜像源 global proxy in China format example dockerhub (docker.io) dockerhub.azk8s.cn dock ...

  9. 1、安装配置Git私有服务器

    安装并配置一个私有的Git服务器吧,这样自己的代码就可以进行版本控制了,当然版本控制的重要性嘛,Please Baidu. 系统环境:64位Win10 Version 1909 安装步骤: 1.下载j ...

  10. Oracle SQL调优系列之SQL Monitor Report

    @ 目录 1.SQL Monitor简介 2.捕捉sql的前提 3.SQL Monitor 参数设置 4.SQL Monitor Report 4.1.SQL_ID获取 4.2.Text文本格式 4. ...