生命周期:lifecycle

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

自由学三年,把想法变成现实。33 折优惠(最后 7 天), 现在订阅 →

实例的 lifecycle,生命周期,就是实例从出生到销毁的过程,在这个过程的不同的阶段,你可以使用 Vue 提供的生命周期接口,去做你想要做的事情 ...

这张图可以帮助我们很好的了解生命周期的不同的阶段,还有你可以使用的接口 ...

比如在调用 new Vue 以后,这里提供了一个 beforeCreate ,也就是实例还没有创建之前,你可以这个接口去做一些事情 ..

然后是 Observe Data .. 观察数据 .. init Events ,初始化事件 ... 这时候 Vue 实例就已经被创建好了 ... 在这个点上,你可以使用 created 这个接口,在创建了实例以后去做一些事情 ..

看一下有没有 el 选项,有的话,再看看有没有 template 选项 ... 如果有就去 Compile template into render function,把模板转换成 render 方法 .. 没有 template 选项,就去 compile 元素的 outerHTML ..

然后就要挂载了 ... 在挂载之前,可以使用这个 beforeMount ... 挂载以后就会执行 mounted 这个钩子 ..

挂载以后,如果数据发生了变化 .. 在更新之前你想做点事情的话,可以实施这个 beforeUpdate , Virtual DOM re-render 以后,你想做点事情的话,可以用一下这个 updated ...

调用了实例的 $destory ,会销毁实例 ... 在销毁之前,你可以使用这个 beforeDestroy ... 销毁之后,可以用一下 destroyed ..

使用这些生命周期的方法可以这样 ... 在这个给 Vue 实例提供的选项里面,可以添加这些方法 ... 比如我想在销毁实例之前还有之后去做些事情 ...

先添加一个 beforeDestroy 这个方法 ... 在这里你可以去做你想要做的事情 ... 先简单的输出一点文字 ... 要被干掉了 ...

销毁之后要执行的 hook 是 destroyed ... 添加一个这样的方法 ... 同样可以简单的在控制台上输出一点文字 ..

然后在浏览器的控制台上,我们可以调用一下实例的 $destroy 这个方法 ... 这样会销毁掉实例 ... 销毁之前,会执行 beforeDestroy ,我们在给实例提供的选项里面,实施了这个方法,做的事情就是输出这个 要被干掉了 ...

销毁之后会执行 destroyed ... 同样我们也实施了这个方法 ... 它做的事情就是输出 bye bye ~

生命周期:lifecycle《 Vue.js 前端框架 》

统计

10670
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点