vue响应数据的原理
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响应数据的原理的更多相关文章
- 详解vue的数据binding原理
自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...
- vue-双向响应数据底层原理分析
总所周知,vue的一个大特色就是实现了双向数据响应,数据改变,视图中引用该数据的部分也会自动更新 一.双向数据绑定基本思路 “数据改变,视图中引用该数据的部分也会自动更新“,从这句话,我们可以分析出以 ...
- 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 基本知 ...
- Vue 监视数据总结 && 表单控件使用总结
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- Vue响应式原理及总结
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- vue响应式原理,去掉优化,只看核心
Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...
随机推荐
- 解决SpringDataJpa实体类中属性顺序与数据库中生成字段顺序不一致的问题
一.在application.yml配置中添加数据库根据实体类自动创建数据库表的配置(这里数据库采用MySQL数据库) jpa: database: MYSQL show-sql: true #Hib ...
- QuantLib 金融计算——收益率曲线之构建曲线(3)
目录 QuantLib 金融计算--收益率曲线之构建曲线(3) 概述 估算期限结构的步骤 读取样本券数据 一些基本配置 配置 *Helper 对象 配置期限结构 估算期限结构 汇总结果 当前实现存在的 ...
- vertica单节点故障恢复 Startup Failed, ASR Required
测试环境的vertica是单节点的,无法做到故障自动恢复,需要手工处理.案例如下: 发现5433端口连接不上,vertica挂了,手工运行admintools,重新启动vertica,仍然失败,提示: ...
- Docker 部署ELK之Sentinl日志报警
前篇文章简单介绍了Docker 部署ELK,以及使用filebeat收集java日志.这篇我们介绍下日志报警配置,这里我们使用Sentinl插件. 1.修改kibana参数 进入elk容器,修改对应参 ...
- Kubernetes Nacos
一.概览 Nacos 是阿里巴巴推出来的一个新开源项目,这是一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台. Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单 ...
- Linux 笔记 - 第二十三章 MySQL 主从复制配置
一.前言 MySQL Replication,也被称为主从复制.AB 复制.简单来说就是 A 和 B 两台服务器做主从后,在 A 服务器上写入数据,B 服务器上也会跟着写入输入,两者之间的数据是实时同 ...
- C# LDAP认证登录类参考
public class LDAPHelper { private DirectoryEntry _objDirectoryEntry; /// <sum ...
- OEL7.6设置光盘YUM源
先把原来的yum源改名让他失效 mv public-yum-ol7.repo public-yum-ol7.repo.bak 然后新建个yum源 [root@localhost yum.repos.d ...
- notepad++ 设置运行python脚本
按F5 在输入框中输入: cmd /k python “$(FULL_CURRENT_PATH)” &PAUSE & EXIT python路径必须在环境变量中. 否则需要输入完整的p ...
- 《linux就该这么学》课堂笔记18 squid服务
Squid服务程序正向解析和反向解析 正向代理模式不仅可以让用户使用Squid代理服务器上网,还可以基于指定的IP地址.域名关键词.网站地址或下载文件后缀等信息,实现类似于访问控制列表的功能.反向代理 ...