//vm实例创建中
//1.data都还没有构建出来数据
//2.方法也还没有构建出来
beforeCreate() {
console.log("vm实例创建中")
// console.log(this.msg)//这时候data都还没有构建出来数据
// this.fn()
},
//vm实例创建完毕
//data 方法 等等工具已经构建完毕
//但是vm还没有挂载到界面上去,可以在这个钩子中做页面第一次加载时的网络请求
created() {
console.log("vm实例创建完毕")
// console.log(this.msg)
// this.fn()
},
//挂载到DOM之前
//data等vm对象的工具构建完毕 正在挂载到DOM中
beforeMount() {
console.log("挂载到DOM之前")
},
//挂载到DOM上了
//有点像window.onload
//这里也可以做网络请求,页面加载了之后的所有业务,都可以在这里
//这个函数执行标志着 vm和dom成功关联==>随意操作vm来间接的操作dom
mounted() {
console.log("挂载到DOM上了")
},
//更新数据之前
beforeUpdate() {
alert("更新数据之前")
debugger//卡住页面
},
//更新数据完毕
//data.xx=100
//xxx.innerHTML=data.xx
//更新的是data,这时候还没有刷新UI,它会找一个合适的时机去刷新UI
//这个钩子调用之后才会刷新UI
updated() {
alert("更新数据完毕")
},
//销毁实例之前
//常常去把一些运行着的代码停下来
//本地或者网络请求来记录用户的配置信息或者偏好设置
beforeDestroy() {
console.log("销毁实例之前",this.msg)
},
//实例销毁了
//钩子调用后 才销毁 做最后的挽救
//从技术的角度来说 可以在这个方法打开其他程序,然后销毁这个程序
destroyed() {
console.log("实例销毁了",this.msg)
}
Vue生命周期函数(钩子函数)
最新推荐文章于 2024-09-16 08:47:17 发布