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. 另一种缓存,Spring Boot 整合 Ehcache

    用惯了 Redis ,很多人已经忘记了还有另一个缓存方案 Ehcache ,是的,在 Redis 一统江湖的时代,Ehcache 渐渐有点没落了,不过,我们还是有必要了解下 Ehcache ,在有的场 ...

  2. goang学习笔记---struct

    什么是结构体 结构体(struct)是用户自定义的类型,它代表若干字段的集合,可以用于描述一个实体对象,类似java中的class,是golang面向对象编程的基础类型. 如何定义一个结构体 type ...

  3. Python 3 的 int 类型详解(为什么 int 不存在溢出问题?)

    在以前的Python2中,整型分为int和long,也就是整型和长整型, 长整型不存在溢出问题, 即可以存放任意大小的数值,理论支持无限大数字. 因此在Python3 中,统一使用长整型,用int表示 ...

  4. 浅析libuv源码-node事件轮询解析(1)

    好久没写东西了,过了一段咸鱼生活,无意中想起了脉脉上面一句话: 始终保持自己的竞争力.所以,继续开写! 一般的JavaScript源码看的已经没啥意思了,我也不会写什么xx入门新手教程,最终决定还是啃 ...

  5. 使用Ueditor上传图片到图片服务器(一)

    网站的文章,通过运营平台来发布文章(图文消息),上传图片等.百度Ueditor比较成熟就采用了该技术,另外上传的图片是网站系统以及运营平台系统共享的,所以考虑搭建独立的图片服务器,以后也可以提供给公司 ...

  6. 硬件笔记之制作MacOS Mojave U盘USB启动安装盘方法

    0x00 概述 随着苹果 macOS Mojave 正式版发布,很多使用 Mac 电脑的同学都已升级到最新版了.但如果你对系统有洁癖或原本系统已凌乱不堪,那么可能还是希望能格式化「全新安装 macOS ...

  7. 为什么改了JS数组中的一个元素的值,其他数组元素值都跟着变了

    原因: 数组是引用类型,数组变量存储在栈,元素数据存储在堆中,将数组赋值不同的对象,所以的赋值对象都指向堆同一个数据,所以改变其中一个数组中的元素,别的数组元素也会改变. 解决方案: 原理就是先把数组 ...

  8. java虚拟机JVM基础

    (1)内存模型以及分区,需要详细到每个区放什么. 堆:Java虚拟机管理内存中最大的一块,线程共享区域.所有对象实例和数组都在堆上分配内存空间. 栈:线程私有,每个线程都会创建一个虚拟机栈,生命周期与 ...

  9. Vue详细介绍模板语法和过滤器的使用!

    表达式 {{ XXX }}使用过滤器 {{ XXX | yyy}}使用多个过滤器 {{ XXX | yyy | yyy1}}过滤器带参数 {{ XXX | yyy(123,"zhuiszhu ...

  10. mysql 存储过程 函数 触发器

    mysql存储过程与函数 存储过程下载  demo mysql> delimiter // -- 这里//为修改默认分隔符: mysql> CREATE PROCEDURE simplep ...