vue响应式原理
vue的响应式,数据模型仅仅是普通的Javascript对象。当你修改它们时,视图会进行更新
那么如何追踪变化:
当把普通的js对象传给vue实例的data选项,Vue将遍历此对象的所有属性,并使用Object.defineProperty把这些属性全部转为getter/setter。
这些getter/setter对用户是不可见的,在内部它们让Vue追踪依赖,在属性被访问和修改时通知变化。
每个组件实例都有相应的watcher实例对象,它会在组件渲染过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而导致使它关联的组件得以更新。
属性必须在data对象上存在才能让vue转化它,vue不允许在已经创建的实例上动态添加新的根级响应式属性。然而它可以使用Vue.set(object,key,value)方法将响应属性添加到嵌套的对象上。
还可以使用Vm.$set实例方法,这是全局Vue.set方法的别名:
例如:
this.$set(this.someObject,'b',)
有时想向一个已有对象添加多个属性,例如使用Object.assign()或者_.extend()方法来添加属性。但是,这样添加到对象上的新属性不会被触发更新。
解决办法:创建一个新的对象,让它包含原对象的属性和新的属性:
this.someObject=Object.assign({},this.someObject,{a:,b:})
声明响应式属性:
由于vue不允许动态添加根级响应式属性,所以必须在初始化实例前声明根级响应式属性,哪怕只是一个空值:
var vm=new Vue({
data:{
message:''
},
template:'<div>{{message}}</div>'
})
vm.message='1'
如果你未在 data 选项中声明 message
,Vue 将警告你渲染函数正在试图访问的属性不存在。
它消除了在依赖项跟踪系统中的一类边界情况,使得Vue实例在类型检查系统的帮助下运行得更高效。
代码在可维护性方面有一点重要考虑:data对象像组件状态的概要,提前声明所有的响应式属性,可以让组件代码在以后重新使用更方便
异步更新队列:
Vue异步执行dom更新。只要观察到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher将被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。然后,在下一个事件循环‘tick’中,Vue刷新队列并执行实际工作。Vue在内部尝试对异步队列使用原生的promise.then,如果执行环境不支持,会采用setTimeout(fn,0)
当设置了vm.someData='new value',该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个tick更新。为了在数据变化之后等待vue完成更新dom,可以在数据变化之后立即使用Vue.nextTick(cb).这样回调函数在dom更新完成后就会调用。
this.$nextTick()返回一个promise对象。
vue响应式原理的更多相关文章
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- vue响应式原理,去掉优化,只看核心
Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...
- 深入Vue响应式原理
深入Vue.js响应式原理 一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h =& ...
- vue响应式原理解析
# Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...
- 浅析Vue响应式原理(三)
Vue响应式原理之defineReactive defineReactive 不论如何,最终响应式数据都要通过defineReactive来实现,实际要借助ES5新增的Object.definePro ...
- 深入解析vue响应式原理
摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析. 1.定义 作为vue最独特的特性,响应式可以说是vue的灵魂了,表面上看就是数据发生变化后,对应的界面会重新渲染,那么响应 ...
- 浅谈vue响应式原理及发布订阅模式和观察者模式
一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...
- Vue响应式原理及总结
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...
随机推荐
- codechef February Challenge 2018 简要题解
比赛链接:https://www.codechef.com/FEB18,题面和提交记录是公开的,这里就不再贴了 Chef And His Characters 模拟题 Chef And The Pat ...
- JAVA Override和Overload的含义去区别
java中的继承,方法覆盖(重写)override与方法的重载overload的区别 1.方法的重写(Overriding)和重载(Overloading)是Java多态性的不同表现,重写(Overr ...
- PXC5.7(Percona XtraDB Cluster)+HAproxy+Keepalived 集群部署
Percona-XtraDB-Cluster+Haproxy 搭建集群环境 环境准备及服务器信息: 配置防火墙 firewall-cmd --add-port=3306/tcp --permanent ...
- Python解释器的安装
Python解释器的安装 作者:Eric 微信:loveoracle11g 下载Python Python-3.7.0(64-bit)下载链接地址: https://www.python.org/ft ...
- [STM32F103]串口UART配置
l 串口时钟使能,GPIO时钟使能: RCC_APB2PeriphClockCmd(); l 串口复位: USART_DeInit(); 这一步不是必须的 l GPIO端口模式设置: GPIO_Ini ...
- 在Windows 10 64-bit上安装Windows SDK 7.1和.NET4
目的: 成功在window10上安装window sdk7.1 和 .NET Framework 4 需求: support some older software written in Visual ...
- React Native仿京东客户端实现(首页 分类 发现 购物车 我的)五个Tab导航页面
1.首先创建 这几个文件 myths-Mac:JdApp myth$ yarn add react-native-tab-navigator 2.各个文件完整代码 1)CartPage.js imp ...
- MySQL一千行笔记
/* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...
- Docker 开启 remoter api
debian 环境: vi /lib/systemd/system/dcoker.service 修改: ExecStart=/usr/bin/dockerd -H fd://为 ExecStart= ...
- undefined symbol: PyFPE_jbuf
参考: https://blog.csdn.net/ture_dream/article/details/52733326 报错确实是Python的版本不一致. 但是我又不想删除anaconda. 怎 ...