1.vue每个组件都是独立的,每个组件都有一个属于它的生命周期。在组件中具体的方法有:
beforeCreate() 创建
created() 据初始化
beforeMount()
mounted() 挂载
(
beforeUpdate()
updated() 更新
)
beforeDestroy()
destroyed() 销毁
2.vue中内置的方法 属性和vue生命周期的运行顺序(methods、computed、data、watch、props)
props => methods =>data => computed => watch
3.自己构造的方法与vue生命周期的运行顺序 如show这些
4.常用到 $refs 来直接访问子组件的方法,但是这样调用的时候可能会导致数据的延迟滞后的问题,则会出现bug。
解决方法则是推荐采取异步回调的方法,然后传参进去,严格遵守vue的生命周期就可以解决 推荐 es6 的promise。
示例代码:
handleAsync () {
return new Promise(resolve=>{
const res="";
resolve(res)
})
}
...
async handleShow() {
await this.handleAsync().then(res=>{
this.$refs.child.show(res);
})
}
...
5.生命周期执行顺序:
1、不使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> destroyed
2、使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> activated --> deactivated
3、使用keep-alive,并且再次进入了缓存页面的情况:beforeRouteEnter -->activated --> deactivated
6.$nextTick使用场景:
1、数据更新后想要马上操作新的DOM,需要把操作写在nextTick的回调里
2、在created钩子函数里需要操作DOM,也可以把操作写在nextTick的回调里,(created钩子函数里还没有挂载dom,所以直接操作会有问题)
7.当在data里没有显示的声明一个对象的属性,而是之后给该对象添加属性,这种情况vue是检测不到数据变化的,可以使用$forceUpdate()。但是这种做法并不推荐,官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题,如上data里不显示声明对象的属性,之后添加属性时正确的做法时用 vm.$set() 方法,所以forceUpdate请慎用
参考链接:https://www.jianshu.com/p/410b6099be69
参考链接:https://www.jianshu.com/p/236cd7fb7b40