vue2深入响应式

深入响应式

由于对Object.defineProperty的一些功能的舍弃，vue不能检测数组和对象的一些变化

对象

vue无法检测对象属性的添加和移除，所以我们直接追加数据不会触发响应式

{{obj}}
添加

  data(){
    return{
      obj:{
        a:1
      }
    }
  },
  methods:{
    add(){
      this.obj.b = 2
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

无法监听到obj增加了b

vue对这种情况提供了Vue.set(object, propertyName, value)

this.$set(this.obj,'b',2)
1

当想要一次添加多个新属性时，应该用原对象和要混入的对象组成一个新对象

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
1

数组

vue无法监听数组长度的修改和通过下标的修改

以上两种情况都可以使用数组的splice解决

同时数组通过下标的修改也可以通过$set

this.$set(vm.items, indexOfItem, newValue)
this.$set(this.items, 1, 'x')
1
2

nextTick(callback)

由于vue在更新dom时是异步执行的，所以可能会产生数据变化但dom还没有变化的情况，如果你想在dom变化后来做一些事情，可以使用nextTick，这样回调函数会在dom更新完成后被调用

点击按钮展示输入框并自动聚焦demo

如果按照上面的写法，input还没有渲染出来，通过$refs拿不到，所以需要使用this.$nextTick

//这样就能完成之前没有显示input，点击按钮后出现并聚焦到input
this.$nextTick(()=>{
	this.$refs.ipRef.focus()
})
1
2
3
4