钩子函数是在一个事件触发的时候, 在系统级捕获到了他, 然后做一些操作; 一段用以处理系统消息的程序."钩子" 就是在某个阶段给你一个做某些处理的机会. vue.js 的生命周期函数, 就是一种常见的钩子函数.
1,vue.JS 中钩子函数 简介
每个 Vue 实例在被创建时都要经过一系列的初始化过程 -- 例如, 需要设置数据监听, 编译模板, 将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一些叫做生命周期钩子的函数, 这给了用户在不同阶段添加自己的代码的机会.
生命周期钩子函数其实就是 vue 实例的选项, 这些选项的值全部都是函数, 代表了该实例从出生到死亡这一生当中的各阶段, 只要达到该阶段就会自动触发. 生命周期的钩子函数都是同步执行的, 不会有异步队列, 也就是初始化实例的一瞬间全部执行完毕
2, 图示
当初始化实例的一瞬间, 它内部会构建一些响应式事件监听的机制, 然后所有的钩子函数就会生成, 之后接纳用户定义的那些数据, 比如 data,methods 之类的.
通过 el 选项或者 vm.$mount(el)来匹配要控制的 html 区域, 然后拿 template 模板中的 HTML 代码去编译, 如果没有的话, 就直接找外面的 HTML, 之后通过虚拟 dom 去替换真实 dom, 然后真实 dom 就会被挂载, 接下来就会处于一种停歇的状态.
当用户更新 model 层的数据, 虚拟 dom 就会重新渲染, 这种可更新状态一直持续到组件被 vm.$destory 卸载, 卸载后数据观测以及里面的子实例身上绑定的相应式监听式事件会被全部取消, 之后再来修改 model 层数据不会有任何效果.
3, 辅助理解
初始化阶段
- beforeCreate(){
- } // 准备怀孕
- created(){
- } // 怀上了
- beforeMount(){
- } // 准备生
- mounted(){
- } // 生下来了
运行阶段
- beforeUpdate(){
- } // 每天都在长大
- updated(){
- } // 每次成长后
销毁阶段
- beforeDestroy(){
- } // 即将舍弃肉身
- destroyed(){
- } // 羽化登仙
4, 使用
mounted 中能拿到所有的数据, 是最安全的选择. 当然, 在 created 或者 mounted 中都可以请求数据, 如果必须使用 dom 操作, 那么可以在 mounted 和 updated 中进行. 以下对一些数据在各阶段进行了测试:
初始化阶段
beforeCreate
拿不到: data 数据, 实例方法, ref 元素(真实的 dom 元素)
能拿到: 钩子函数, 自定义选项
created
拿不到: ref 元素(真实的 dom 元素)
能拿到: data 数据, 实例方法, 钩子函数, 自定义选项
beforeMount
拿不到: ref 元素(真实的 dom 元素)
能拿到: data 数据, 实例方法, 钩子函数, 自定义选项
mounted
能拿到所有
当然, 之后的钩子函数 (除了销毁之后) 肯定也能拿到所有, 不用再做讨论
运行时阶段
beforeUpdate
能拿到所有
打印的是更新后的数据, 但是当这个钩子打印的时候, 数据并没有渲染到页面, 也就是虚拟 DOM 更新了, 但真实 DOM 并没有更新
updated
能拿到所有
这个钩子是在真实 DOM 已经渲染完成后才执行函数中的业务逻辑
销毁阶段
beforeDestroy
能拿到所有
destroyed
拿不到: ref 元素(真实的 dom 元素)
能拿到: data 数据, 实例方法, 钩子函数, 自定义选项
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/16698.html