Vue 的 生命周期函数加一点扩展

一、深入学习methods

methods 中是定义事件监听的，主要是用来响应我们用的 @click、@mouseenter 等这些事件处理函数。

用法：

• 绑定到事件监听里面 @click = "add"
• {{}} 插入函数执行，{{add()}}

根据计算结果可知，这里调用书写一次，函数执行了四次。原因就是生命周期做的鬼。

• methods 中定义的函数，可以在任何指令中调用，例如：v-for。

注意：一些从 npm 上下载的包，提供的函数，也必须放入methods中，否则 template 中用不了。例如 moment

二、computed 学习

computed 表示计算后的值，定义的时候如果写的是函数，template 使用的时候，不许加圆括号。也就是将在这个 API 里面定义的函数 无法传参，保持 API 的纯粹，相较与 methods ，computed 有缓存，不用每次都会去调用函数。
写个例子：

按我翻倍.gif

这个调用方法厉害，可以实时监听变量 a。

另一种用法：
computed 可以有 set 和 get。reset 现在不是一个函数，而是一个对象， 里面有两个属性都是函数，分别叫做 set 和 get。set 用来设置 get 里面返回的值，get 用来得到值。
举个例子：

三、认识 watch

watch是一个对象，里面所有属性必须都是函数，这些函数会当它自己的同名 data 变化的时候触发。为了好记我叫它：同名变量函数。
我们现在写个例子当 a 变量改变时，自动监听去改变 b 的值。

同名变量函数.gif

四、八大生命周期函数

先来总体认识一下是哪八个？

beforeCreate()： 组件创建之前
created()： 组件已经创建
beforeMount()： 组件上树之前
Mounted()： 组件已经上树，这是最早的能够使用$refs的生命周期
beforeUpdate()： 组件更新之前
updated()： 组件已经更新
beforeDestroy()： 组件消亡之前
destroyed()： 组件已经消亡

需要记住的两点：

• 不要在 beforeUpdate、updated 中改变 data 或者 props。因为引发死循环。
• Mounted()： 组件已经上树，这是最早的能够使用 $refs 的生命周期。

再来测试生命周期起作用的时间点。测试代码如下：

测试结果显示，页面一但刷新，最先起作用的是下面打印的这四个生命周期，一般来讲，beforeCreate 是来放 Ajax 的，mounted 是用来做事件委托的，中间两个没啥用处。

来验证后面四个生命周期函数，当组件死亡时候就已经没有任何作用，所以在点计数器加一已经没有任何效果：

生命周期.gif

至此我们发现在 Vue 的 export default 里面只能书写的东西有：

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed props components data methods watch computed

除了这十四个，其他的东西都是非法的。