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

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

 

当然,目前还不需要深入了解其中的东西.但是我们可以从中看到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属性.如果有不同意见请留言讨论.

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