图片 1

vue浓重响应式原历史学习

vue中核查象中新扩张的性质增至检查实验种类中

一、怎么着追踪变化

使用Object.defineProperty将盛传的性质转换为setter/getter。每一个组件实例有相应的
watcher实例对象,会在组件渲染时将品质记录为依附,当有关重视的setter被调用时,会通报watcher重新总计更新组件。
vue浓重响应式原历史学习。总计:每一种实例有watcher监听变化,属性和实例之间通过Object.defineProperty措施转变。

图片 1

数据与Virtual Dom

在上一篇文章中,大家开采改了
data
中的数据之后,分界面上相应部分也会自动发生变化,那么那就是响应式的。

deepCopy { // 将o2的内容拷贝给data中的o1 var key, i if  { for (i = 0; i < o2.length; i++) { if (o2[i] instanceof Array) { this.$set this.deepCopy } else if (o2[i] instanceof Object) { this.$set this.deepCopy } else { this.$set } } } else if  { for  { if (o2[key] instanceof Array) { this.$set this.deepCopy } else if (o2[key] instanceof Object) { this.$set this.deepCopy } else { this.$set } } } else { o1 = o2 }}

二、检验变化的注意事项

vue无法检验到目的属性的丰盛或删除。
之所以vue在领头化实例对品质进行setter/getter调换进度时,属性必得在data对象上,工夫成功响应式。

var vm = new Vue({
  data:{//初始化必须在data中
  a:1
  }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

增添新的习性:

Vue.set(vm.Object,key,value)//方法一
this.$set(this.Object,key,value)//方法二
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
//方法三,创建新的对象,包含元对象的属性和新的属性。

缘何改了数据,相应的分界面就能够发生变化呢?那中间的准则到底是哪些?

发表评论

电子邮件地址不会被公开。 必填项已用*标注