vue应用难点总结

Posted 2020-11-10 94pm

一、父子组件生命周期

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

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

二、响应式数据

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 // 不是响应性的 

　

非响应式数据的变动是不会被watch到的（即使用了deep选项还是不行），computed也不会重新计算依赖;