您的位置：首页 > 产品设计 > UI/UE

vue 生命周期

2017-11-26 00:00 106 查看

每个Vue实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到DOM、在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。

beforecreated：el和data并未初始化
created:完成了data数据的初始化，el没有
beforeMount：完成了el和data初始化
mounted：完成挂载

https://segmentfault.com/a/1190000008010666

比如created钩子可以用来在一个实例被创建之后执行代码：

newVue({
data:{
a:1
},
created:function(){
//`this`指向vm实例
console.log('ais:'+this.a)
}
})
//=>"ais:1"

也有一些其它的钩子，在实例生命周期的不同场景下调用，如mounted、updated、destroyed。钩子的this指向调用它的Vue实例。

不要在选项属性或回调上使用箭头函数，比如created:()=>console.log(this.a)或vm.$watch('a',newValue=>this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this不会是如你所预期的Vue实例，经常导致UncaughtTypeError:Cannotreadpropertyofundefined或UncaughtTypeError:this.myMethodisnotafunction之类的错误。

生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue

相关文章推荐

新的分享

章节导航