当你把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。
这些getter/setter对用户来说是不可见的，但是在内部他们让vue追踪依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher实例对象，它会在组建渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
对象更改检测
在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。
Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。
例子一：属性a是已经声明了的，是响应的；属性b没有提前声明，因此改变了属性b的值的时候，如果直接赋值 this.form.b = 'desc' , 虽然打印出来的值是改变了的，但是视图并没有更新。需要用Vue.set(object, key, value) 【或 this.$set(object,key,value)】 方法将响应属性添加到嵌套的对象上。注意：object必须是在data中已经声明的对象。
......
动态添加嵌套属性1：
a的值{{form.a}}
b的值{{form.b}}
改变A
改变B
.......
export default {
name: "layout",
data(){
return {
form:{
a:''//初始化
}
}
},
methods:{
changeA(){
this.form.a = 1
},
changeB(){
//this.form.b = 'desc' //无效
this.$set(this.form,'b','desc')//动态添加
//或者 Vue.set(vm.form,'b','desc')
}
}
}
例子二：Vue.set(object,key,value)方法一次只能添加一个属性，如果需要向嵌套对象上添加多个属性，可以用Object.assign方法。object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。
vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' }) 注：object必须是已经声明的对象
......
object.assign方法
{{form3.f1}}
{{form3.f2}}
添加多个属性
......
export default {
name: "layout",
data(){
return {
form3:{}
}
},
methods:{
changeForm3(){
this.form3 = Object.assign({},this.form3,{f1:'f1',f2:'f2'})
}
}
}
数组渲染问题
通过改动两种方式改动数组时，Vue检测不到变动：1.利用索引直接设置一个项；2.修改数组长度。
例子三：利用索引直接设置一个项，不能直接触发状态更新。
这个是{{item}}
export default {
name: "layout",
data(){
return {
trees:['a','b','c']
}
},
methods:{
changeMe(idx){
//this.trees[idx] = 'x'//无响应
this.$set(this.trees,idx,'x')//有响应
//this.trees.splice(idx,1,'x')//有响应
}
}
}
例子四：改变数组长度
这个是{{item}}
改变长度
export default {
name: "layout",
data(){
return {
trees:['a','b','c']
}
},
methods:{
changeLength(){
//this.trees.length = 2//无响应
this.trees.splice(2)//有响应
}
}
}
Vue.js 源码分析(四) 基础篇 响应式原理 data属性
官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...
Vue.js 技术揭秘(学习) 深入响应式原理 nextTick外传
microTask mutationObserve. promise.then macroTask setImmediate. messageChannnel.setTimeout.postMess ...
Vue的响应式原理
Vue的响应式原理 一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...
Vue 数据响应式原理
Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...
vue 数据劫持 响应式原理 Observer Dep Watcher
1.vue响应式原理流程图概览 2.具体流程 (1)vue示例初始化(源码位于instance/index.js) import { initMixin } from './init' import ...
vue深入响应式原理
vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...
Vue.js学习 Item12 – 内部响应式原理探究
深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...
Vue.js响应式原理
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...
vue学习之响应式原理的demo实现
Vue.js 核心: 1.响应式的数据绑定系统 2.组件系统. 访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. va ...
随机推荐
socket模块的getaddrinfo方法详解
getaddrinfo方法用于通过url解析dns import sys,socket def dns_resolver(url): result = socket.getaddrinfo(url, ...
千人基因组计划数据库下载某段区域SNP
进入http://browser.1000genomes.org/index.html网站 假定要寻找“6:133098746-133108745”这段距离的SNP数据,“6”表示6号染色体,后面的数 ...
linux内核中异步通信机制--信号处理机制【转】
转自:http://blog.csdn.net/lu_embedded/article/details/51131663 什么是异步通信?很简单,一旦设备准备好,就主动通知应用程序,这种情况下应用程序 ...
JavaScript寻踪OOP之路
上一集中,重点介绍了谁动了你的代码.这里先总结一下:咱们的代码从敲下来到运行出结果,经历了两个阶段:分析期与运行期.在分析期,JavaScript分析器悄悄动了我们的代码:在运行期,JavaScrip ...
java事件处理
1.ActionEven事件 文本框,按钮,菜单项,密码框,单选按钮都可以出发ActionEvent事件 使用 addActionListener(ActionListener listen1) 来注 ...
2017广东工业大学程序设计竞赛决赛-tmk买礼物
tmk买礼物 Description 今天是校赛的日子,为了庆祝这么喜庆的日子,TMK打算买些礼物给女票LSH庆祝一下. TMK进入了雪梨超市,然后刚踏入的一瞬间,店主就对TMK说:“恭喜你成为了本店 ...
Django认证系统
一.cooie与session 1.1 cookie与session cooie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又要保持状态,因此cookie就是在这样的一个场 ...
YCSB报";: No such file or directory";异常
异常信息如下: 文件路径.权限都没有问题. 上网遍寻无果,安装流程与官网一致,开始怀疑是环境问题,后来用别人能用的YCSB复制到本地,却能正常运行. 后来修改了ycsb文件,加了个空格,保存退出,再运 ...
Eclipse 护眼背景色设置
链接地址:http://blog.chinaunix.net/uid-27183448-id-3509010.html 背景颜色推荐:色调:85,饱和度:123,亮度:205 文档都不再是刺眼的白底 ...
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
