开心，终於正式进入 Vue 的介绍了~
在了解 Vue 的写法前，有个重要的观念必需去了解，那就是 Vue的生命周期
其实我觉得，不管是不是 vue 还是其他的前端框架，生命周期应该都可以算是框架的整个核心，若是不去了解，也是很难实作的，那麽开始吧~

Vue 的生命周期介绍

首先，先来看看官方提供的生命周期图

图片来源 Vue官方文件

生命周期可以让我们更好理解哪些问题可以在哪一个时机去进行处理，而 Vue 提供了这些时机呼叫的方式，称之为 hook，接着把上面各个周期先整理出来，以下:

• beforeCreate :
  实例初始化立即叫用，但是还为创建实例，任何的 Vue实体 都还未配置(像是 data、methods ...都还无法使用)

• created :
  Vue 的实例已经完成创建，这时 Vue实体中的配置除了 $el 外已全部配置(data、methods ...已初始化，可以取得其资料)，$el 要在挂载模板後才会配置

• beforeMount :
  在 Vue 实体中的定义挂载到目标元素之前，$el 会是还未被 Vue 实体中定义渲染的初始设定模板

• mounted :
  Vue 实体中的定义已经成功挂载到目标元素，$el 已透过 Vue 实体中的定义渲染成真正的页面(像是 v-model、v-bind、{{ }} .... 等都已经成功渲染或是绑定完成)

• beforeUpdate :
  在资料更新前(像是变更 data 里面变数的值之前)

• updated :
  我们变动的值已经变更上去并更新画面了

• beforeDestroy :
  在 Vue实体被销毁之前，功能都还完整存在

• destroyed :
  此时 Vue实体已经被销毁，虽然画面还是会存在，不过已解除绑定，任何操作也无法更新画面了
  (有点类似 Vue 归 Vue，DOM 归 DOM 的概念，所以尽管 Vue 的值再怎麽去变更，也只是 Vue 里面在做的事情，画面已经不会去管，无双向绑定的效果了)

跟着实例一起看生命周期

看着文字，有时候真的不好想像画面，如果你跟我一样~ 是需要搭配着例子比较好懂类型的人 XD
下面用最简单的例子来看看 各个生命周期的时机吧~

在网页启动完毕时，已瞬间来到 mounted

看到了吗? 只要网页一打开，就已经经过了生命周期的四个阶段，代表 vue 的实体已经被建立好，并且绑订到指定的实体 DOM 上面了，也就代表我们只要更改 data 里变数的值，画面就会跟着被更新

更新内容的那瞬间

接着我们可以透过实例画面上的输入框来更新 hello 的字样，这里示范的做法是用 v-model 绑定输入内容，再将输入的内容指定给 hello 字样的插值变数，更新完毕後也已经跑完 beforeUpdate 跟 updated 两个生命周期了。

图中之所以会有那麽多次 beforeUpdate 跟 updated 是因为在输入框使用了 v-model ，因此每当输入一个字，v-model 所绑定的变数都需要更新，进而触发 beforeUpdate 跟 updated。
(v-model 之後会提到，这边先偷偷用一下XD)

烧毁 ~ 断开 vue 的连结，断开锁链

最後我们来看 beforeDestroy 跟 destroyed 这两个周期，这边我们先写了一个按钮来呼叫 destroyed，所以画面中的 Destroy instance 按钮一点击下去，我们再怎麽变更绑定的值，画面也不会更新了

从图中右边的 console 来看，destroyed 被触发後 vue 就与实体 DOM 的连结被切断了，虽然绑定的变数值已经被改成 Orz，但是画面已经不会更新了。

另一点可以观察的是，destroyed 後我们变更输入框的内容，一样也不再触发 beforeUpdate 跟 updated。
附上实例的程序码 : Codepen 生命周期范例

参考资料

iT邦帮忙 [ Vue.js ] 生命周期 lifecycle ,ShawnL
iT邦帮忙 Vue.js Core 30天屠龙记(第4天): Vue 实体的生命周期 ,Peter Chen