Vue组件生命周期、钩子函数
2018-08-11 09:49
239 查看
beforeCreate
[code]beforeCreate() { // 在组件还没有创建好时,是不能访问组件的任何方法和属性的 console.log('beforeCreate 组件开始创建前') },
created
[code]created() { // 组件创建好之后可以组件实例的变量和方法 // 组件创建好之后不能访问dom // $.post('user',function(res){ // this.username= res.data // }) //可以在此钩子函数请求数据 console.log('created 组件创建好了') },
beforeMount
[code] beforeMount() { // 挂载组件 // 组件将要被挂载了、 // 可以访问到要挂载的目标 // 不能访问到组件的dom // 这里可以访问到dom 但不能访问到组件的dom只能访问到要挂载的目标dom console.log(this.$el) console.log('beforeMount 组件开始挂载') },
mounted
[code]mounted() { // 组件挂载完成 // 只有当组件挂载完成之后才能访问到组件的dom console.log(this.$el) console.log('mounted 组件挂载完成') // 必须通过mounted钩子之后去获取到组件的dom元素 },
beforeUpdate
[code]beforeUpdate() { // 只有更新和模板发生关联的数据才会触发这个钩子 // 和模板绑定的数据更新之前 console.log('beforeUpdate 和模板绑定的数据更新之前') },
updated
[code]updated() { // 只有更新和模板发生关联的数据才会触发这个钩子 // 和模板绑定的数据更新完成之后 console.log('updated 和模板绑定的数据更新完成之后') },
beforeDestroy
[code]beforeDestroy() { // 一般像页面组件 页面离开之前 保存数据 可以通过这个钩子来完成 // 当组件销毁之前触发 console.log('beforeDestroy 当组件销毁之前触发') console.log(this.$el) },
destroyed
[code]destroyed() { // 当组件销毁之后触发 console.log('destroyed 当组件销毁之后触发') //等待系统自动回收对象 //销毁之后组件的对象还在,但是跟vue的实例脱离了关系了 }
阅读更多
相关文章推荐
- Vue.js学习(四):父子组件中的生命周期与钩子函数的调用顺序
- 深入理解Vue父子组件生命周期执行顺序及钩子函数
- Vue父子组件生命周期执行顺序及钩子函数的个人理解
- 前端框架vue.js系列(10):生命周期钩子函数
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue父子组件钩子函数
- vue之组件的生命周期
- 生命周期(vue的钩子函数)
- vue教程2-01 vue生命周期、钩子函数
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器
- vue组件的生命周期
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- vue生命周期和钩子函数的一些理解
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue生命周期钩子函数
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue笔记:生命周期和钩子函数