最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Vue 生命周期

XAMPP案例 admin 59浏览 0评论

生命周期函数
生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数

简单来说就是,钩子(生命周期函数)就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮,也是不行的。组件也是一样,Vue 在实例化一个组件时会在特定的阶段调用特定的方法,调用的这个方法就叫钩子方法,比如 Vue 在实例化组件之初按顺序调用beforeCreated,created,beforeMounted,mounted,每个阶段组件内部的属性都是不一样的,比如created钩子时视图还没有渲染,就不能做一些dom操作。所以一般特定的钩子做特定的事,比如ajax获取数据就可以在mounted阶段,当然放在created,beforeMounted也是可以的,因为ajax是异步的嘛,ajax之后的回调会放在事件队列的尾部,此时实例化组件整个过程会在ajax回调之前执行完毕。所以ajax操作放在created,mounted里面都是可以的。

在调用new vue时,Vue 会帮我们去创建一个 Vue 的实例,创建过程其实并不是像我们想的这么简单,首先它会初始化一些事件和生命周期相关的内容,

在初始化完成的时候,Vue 会自动的执行一个beforeCreate函数,

之后会初始化一些外部的注入和一些双向绑定相关的事情,当这一部分完成后,基本上 Vue 的初始化就都完成了。在这个节点上又有一个created函数被自动执行

let vm = new Vue({
el:’#app’,
beforeCreate(){
console.log(‘beforeCreate’)
},
created(){
console.log(‘created’)
}
})
这个时候 Vue 的初始化已经基本结束了,然后它会询问一个条件:你这个 Vue 实例里是否有el这个选项

如果有就会询问是否有template这个选项:

如果没有就会走右侧的这个分支,

如果这个实例没有templeate,就会将el这个根节点当做模版,来进行渲染
有就会走左侧的分支

把template作为模版去渲染
上面这一步走完后,并没有立即渲染,在渲染之前会执行beforeMount函数

当这个函数执行之后,模版结合数据最终生成的Dom元素,会被挂载到页面之上

当被挂载到页面之上,也就是hello world显示到页面之上,这时候mounted函数会被执行(页面挂载之后会执行)

let vm = new Vue({
el:’#app’,
beforeCreate(){
console.log(‘beforeCreate’)
},
created(){
console.log(‘created’)
},
beforeMount(){
console.log($el) //<div id=”app”></div>
console.log(‘beforeMount’)
},
mounted(){
console.log($el) //<div id=”app”>Hello world</div>
console.log(‘mounted’)
}
})
这里也验证了beforeMount执行时,页面还没有被渲染,mounted执行时,页面已经被渲染了

在往下是beforeDestory(实例被销毁前执行),destoryed(实例销毁完成后执行)

当数据被改变时,会执行beforeUpdate(数据被改变,还没渲染之前触发),updated(数据被改变,渲染完成后触发)

转载请注明:XAMPP中文组官网 » Vue 生命周期