7. 实例生命周期钩子---(vue入门文档学习记录)

桃扇骨 2022-01-12 11:25 209阅读 0赞

1.想要了解vue的实例生命周期钩子就要先了解实例的声明周期是怎样的,先拿文档的生命周期图示看一下(部分,想看全图请移步vue文档):

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3OTcwNjk5_size_16_color_FFFFFF_t_70][]

当然,目前还不需要深入了解其中的东西.但是我们可以从中看到beforecreate,created等生命周期钩子在实例生命周期的具体哪个阶段,那么我们还是来学习生命周期钩子的作用和用法:

作用:

文档的简介是 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

也就是说这些所谓的生命周期钩子实际上就是切入点,是一种切面编程,我们可以在vue实例生命周期的各个阶段添加额外的处理,也就是功能增强.

用法示例:

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

new Vue(

data: \{ a: 1 \},

created: function () \{

// \`this\` 指向 vm 实例

console.log('a is: ' + this.a)

\} \})

// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 [mounted][]、[updated][] 和 [destroyed][]。**生命周期钩子的 this 上下文指向调用它的 Vue 实例。**

**我觉得上述的this是指向的vue实例这句话是有问题的,经测试在created中this.el或者是this.$el都会提示undefined 只有this.a可以打印出来,个人觉得这个this是指向的它的vue实例中data属性.如果有不同意见请留言讨论.**

**推荐一个前端入门视频,有需要的可以一起学习,亲测还不错**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3OTcwNjk5_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3OTcwNjk5_size_16_color_FFFFFF_t_70]: /images/20220109/dc8cedf258a64ac2804d220ce6633419.png
[created]: https://cn.vuejs.org/v2/api/#created
[mounted]: https://cn.vuejs.org/v2/api/#mounted
[updated]: https://cn.vuejs.org/v2/api/#updated
[destroyed]: https://cn.vuejs.org/v2/api/#destroyed
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3OTcwNjk5_size_16_color_FFFFFF_t_70 1]: /images/20220109/7c1cf37d5a8a4ba9ac8df478770a2f8c.png