了解 vue 的生命周期函数和运行中事件, 有助于我们更好地使用 vue
具体代码文件 https://gitee.com/zhiqiexing/vue.js/blob/b4b0198026b7a1aefdf52ee989382026b82a09d1/code/01/18.html
生命周期
四个生命周期函数
beforeCreate
第一个生命周期函数, 表示实例已经创建, 但 data 和 methods 还没有被初始化
created
第二个生命周期函数, 能够获取 data 中的数据和 methods 中的方法
beforeMount
第三个生命周期函数, 模板已经在内存中编译完成, 但尚未渲染到页面中'
mounted
第四个生命周期函数, 内存中的模板已经渲染到页面, 用户可以看到渲染好的页面
vue 的生命周期函数
两个运行中的事件
可以监听数据的变动
运行中的事件. gif
beforeUpdate
data 中的数据已经是最新的, 而页面中显示的数据还是旧的, 两者尚未同步
updated
此时, data 中的数据与页面中的数据已经同步更新
如想了解更多的 vue 实例, 请查阅我的 vue 笔记目录
来源: http://www.jianshu.com/p/a0933b719fb5