前端小白简单总结,还望各位大佬多多指教~
Vue生命周期钩子函数
大致分为三个阶段:
1、初始化阶段:
beforeCreate(组件创建前):data和methods中的数据还未被初始化 —— 一般用不到
created(组件创建结束):data和methods中的数据已经完成初始化 —— 获取ajax,初始化操作
beforeMount(组件挂载前):模板编译完成,但还未渲染挂载到页面
mounted(组件挂载结束):真实dom渲染完成,挂载到页面,可以操作dom了
2、运行阶段:
触发条件:当数据发生变化时
beforeUpdate(页面更新前):数据已更新,页面中的数据还未更新 —— 一般用watch来替换
updated(页面更新结束):页面也完成更新,和数据保持一致
3、销毁阶段:
触发条件:当组件销毁时
beforeDestroy(组件销毁前):data、methods、指令、过滤器等都还可以正常使用,未执行销毁
destroyed(组件销毁结束):data、methods、指令、过滤器等都已经不可用
图片来自黑马前端教程
vm实例上的属性和方法
- this.$data:vm上的数据
- this.$watch:监控
- this.$el:当前el元素
- this.$set:后加的属性实现响应式变化
- this.$option:vm上的所有属性
- this.refs更为优雅
- this.$nextTick(( )=>{ // 异步方法,等待dom渲染完成后再获取vm })
$nextTick括号中的自执行函数是在dom渲染完成后执行的
dom渲染是异步的,如果数据变化后想立即获取真实dom中的最新内容,需要等待页面渲染完成后才能去获取,因此所有的操作dom方法最好放在nextTick中,mounted中常用。
例如:
<div id="app">
<div ref="wrap">
<div v-for="a in arr" ref="mydiv"></div>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3]
},
mounted(){
console.log(this.$refs.mydiv) // [div, div, div]
this.arr = [1, 2, 3, 4];
console.log(this.$refs.wrap) // [1, 2, 3]
this.nextTick(() => {
console.log(this.$refs.wrap); // [1, 2, 3, 4]
})
}
})
</script>