Vue实例生命周期函数

vue

先简单讲下Vue实例：

每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的

当创建一个Vue实例时，你可以传入一个选项对象。

一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套的，可复用的组件树组成。

所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）

实例生命周期钩子" title="生命周期钩子">生命周期钩子

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

生命周期钩子的this上下文指向调用它的Vue实例

不要在选项属性或回调上使用箭头函数，比如：

created: () => console.log(this.a) 或

vm.$watch('a', newValue => this.myMethod())

因为箭头函数是和父级上下文绑定在一起的，this不会是如你预期的Vue实例，经常导致

Uncaught TypeError: Cannot read property of undefined 或

Uncaught TypeError: this.myMethod is not a function 之类的错误

生命周期图示：

生命周期函数就是Vue实例在某一个时间点会自动执行的函数

1，调用new Vue() ，Vue会帮助我们创建一个Vue实例

2，初始化时间和生命周期（init events & lifecycle）

3，Vue会自动执行生命周期函数beforeCreate（初始化时间和生命周期之后就执行）

4，处理外部的注入和双向绑定的一些相关内容（init injections & reactivity）

这一步执行完之后，Vue实例的初始化就基本完成了

5，4步骤之后执行created函数

create在beforeCreate之后执行了

6，询问是否有el这个选项，走Yes这条线

7，再询问是否有template这条线

没有走右侧分支

Compile el's outerHTML as template (把el内部的内容或者说整体的内容当做模板)

有走左侧分支

Compile template into render function

所以下面两种方式是一样的：

8，在渲染之前，执行beforeMount函数（在模板和数据相结合，即将挂载到页面上的一瞬间之前的时间点上）

9，create vm.$el and replace "el" with it

模板和数据结合的元素会被挂载到页面之上

10，执行mounted函数（在页面上挂载之后执行）

说明当beforeMounted函数执行的时候，页面还没有被渲染，当mounted函数执行的时候，页面已经被渲染了

11， when data changes Virtual DOM re-render and patch

beforeUpdate是在数据发生改变但是还没有重新渲染之前执行

updated是在重新渲染之后执行

12，when vm.$destroy() is called Teardown watchers，child components and event listeners

当destroy()函数被调用的时候执行beforeDestroy函数，当组件被完全销毁时，destroyed函数执行

注：Vue的生命周期函数不能放在methods里面，单独的放在Vue实例里面就好了