vue最大的特点就是数据驱动视图。

vue的数据改变,页面一定发生改变?不一定。

当操作引用类型的数据,动态添加属性时,页面不会发生改变。

vue响应式数据原理(也叫数据绑定原理、双向数据绑定原理):

  底层是Object.defineProperty(),目前用的vue2.6版本和将来更新的vue3.0(proxy)都是通过给data中的数据加一个数据劫持(setter和getter方法)。但是不管哪种版本,ie浏览器都有兼容性问题,vue2.6不兼容ie8及以下,vue3.0不兼容ie11。

  Object.defineProperty()处理data里的数据,数据就添加上get和set方法,数据获取的时候触发get,数据修改的时候触发set。在修改数据的时候,优先触发set,触发watcher监听,再通知界面。

  vue中如果动态添加属性,该属性就没有经历过处理,就没有set和get方法,所以数据变页面不变。

  vue提供一个实例方法:vm.$set(目标对象,'动态添加的属性名','属性值')可以添加一个响应式属性,会触发视图的更新。

vue响应数据的原理的更多相关文章

  1. 详解vue的数据binding原理

    自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...

  2. vue-双向响应数据底层原理分析

    总所周知,vue的一个大特色就是实现了双向数据响应,数据改变,视图中引用该数据的部分也会自动更新 一.双向数据绑定基本思路 “数据改变,视图中引用该数据的部分也会自动更新“,从这句话,我们可以分析出以 ...

  3. Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)

    文章目录 1.列表排序 1.1 .代码实例 1.2 .测试效果 1.3.需要掌握的前提知识 2.Vue监测数据变化的原理 2.1.代码实例 2.2 .测试效果 3.Vue检测数据的原理 3.1 基本知 ...

  4. Vue 监视数据总结 && 表单控件使用总结

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  5. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  6. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  7. Vue响应式原理及总结

    Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...

  8. 详解Vue响应式原理

    摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

  9. vue响应式原理,去掉优化,只看核心

    Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...

随机推荐

  1. 用友U8删除采购转固卡片后,再次转固找不到采购订单,且其他订单转固报错

    问题描述 1.用户反馈删除两张之前通过采购转固定资产的卡片后,想要再次生成卡片时候,却找不到这两张卡片. 2.用户尝试对其他未转固定资产的订单进行转固,在保存卡片时提示“本次结转将放弃全部已完成的业务 ...

  2. 【MySQL】MariaDB10.3新特性--闪回查询

    MariaDB10.3新特性--闪回查询 System-Versioned表特性的引入,可以对表进行闪回.完成类似于Oracle的闪回查询. 修改已有表为System-Versioned MariaD ...

  3. FZU 1759 题解 欧拉降幂

    本题考点:欧拉降幂 Super A^B mod C Given A,B,C, You should quickly calculate the result of A^B mod C. (1<= ...

  4. 常见HTTP响应状态码

    分类 分类 分类描述 1** 信息,服务器收到请求,需要请求者继续执行操作 2** 成功,操作成功接收并处理 3** 重定向,需要进一步的操作以完成请求 4** 客户端错误,请求包含语法错误或无法完成 ...

  5. windows下PyTorch安装之路记录

    最近两天被windows下pytorch的安装给搞得很烦了,不过在今天终于安装成功了,如下图所示 下面详细说下此次安装的详细记录吧.我的电脑环境是Windows10+cuda9.0+cudnn7.1. ...

  6. redux的本质是一套行为解释系统

    redux的本质是一套行为解释系统. 首先构建解释系统: 然后使用解释系统对行为进行解释,进而完成对store和状态的维护.

  7. 【07】Kubernets:资源清单(控制器 - DaemonSet)

    写在前面的话 前面讲解了 Pod / ReplicaSet / Deployment 的资源清单,我们这里谈一下 DaemonSet 的资源清单. 之前说过,DaemonSet 控制器能够保证资源在每 ...

  8. LinkedHashMap 的核心就 2 点,搞清楚,也就掌握了

    HashMap 有一个不足之处就是在迭代元素时与插入顺序不一致.而大多数人都喜欢按顺序做某些事情,所以,LinkedHashMap 就是针对这一点对 HashMap 进行扩展,主要新增了「两种迭代方式 ...

  9. WPF 精修篇 WPF 使用ActiveX

    原文:WPF 精修篇 WPF 使用ActiveX WPF 实现远程桌面功能 首先使用 开发人员命令提示 进入 自己的项目文件根目录下 输入 aximp C:\windows\System32\msts ...

  10. 浅谈Vue.js2.0核心思想

    Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动.组件系统. 数据驱动: Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProper ...