vue应用难点总结

一、父子组件生命周期

父组件create->子组件create->子组件mounted->父组件mounted

当一个钩子函数使用了异步请求时，并不会等该钩子函数中所有异步的回调都执行完了再执行后面的生命周期函数。

二、响应式数据

所谓响应式数据就是当数据发生变化时会更新引用该数据的dom、会使computed属性重新生成值，会被watch方法监听到；

Vue判断数据是否变化的方法很简单，值类型直接用===来比较是否相同,引用类型则比较地址；

Vue 将会递归将 data 中的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化；

当把data中某个对象或数组类型的属性整体替换时，该属性的所有成员依然是响应式的

var vm = new Vue({
  data:{
    obj:{id:1}
  }
})
vm.obj={name:'replace',id:'3'} //obj被整个替换了，但还是响应式的，里面的name和id也是响应式的

Vue 不能检测对象属性的添加或删除：

vm.obj.dynamicAdd="动态添加的属性" //dynamicAdd是后续动态添加的属性，如果想变成响应式的则需要用vm.set()

数组元素注意事项:

能侦测到数组变化的操作方法有：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

• 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的 

对于第一个问题的解决方案使用以下两种方法中的任意一种即可：

vm.items.splice(1, 1, 'newb')；//相当于是替换
vm.$set(vm.items, 1, 'newB')

对于第二个问题的解决方案如下：

vm.items.splice(newLength) //newLength如果超出了数组的长度，则从数组末尾开始添加内容