vue从入门到精通

1、钩子函数定义

日常生活中，我们的钩子是用来钩住某种东西的，比如，说，鱼钩是用来钓鱼的，一旦鱼咬了钩，钩子就一直钩住鱼了，任凭鱼在水里怎么游，也逃不出鱼钩的控制。同样的，Windows的钩子Hook也是用来钩东西的，比较抽象的是他是用来钩Windows事件或者消息的。最常见的就是鼠标和键盘钩子，用Hook钩子钩住鼠标、键盘，当你的鼠标、键盘有任何操作时，通过Hook就能知道他们都做了什么了，多么形象啊，把老鼠Mouse钩住了，不管你干什么，都逃不过我钩子Hook的手掌心。

技术上讲，钩子（Hook）是Windows消息处理机制的一个很重要的内容，谁叫Windows是基于消息的呢。应用程序可以通过钩子机制截获处理Window消息或是其他一些特定事件。

1.1、组件生命周期钩子函数

一个组件从创建到销毁会经历一系列的特殊过程，把执行过程叫做组件的生命周期
每个生命周期都会执行特殊的函数，把这些函数称为生命钩子函数
vue生命周期4组8个常用 创建前后，挂载前后︰更新前后，销毁前后

beforeCreate() {
        console.log('beforeCreate', '创建前');
    },
    created() {
        console.log('created', '创建完成');
    },
    beforeMount() {
        console.log('beforeMount', '挂载前');
    },
    mounted() {
        console.log('mounted', '挂载完成');
    },
    beforeUpdate() {
        console.log('beforeUpdate', '更新前');
    },
    updated() {
        console.log('updated', '更新完成');
    },
    beforeDestroy() {
        console.log('beforeDestroy', '销毁前');
        clearInterval(this.interID)
    },
    destroyed() {
        console.log('Destroy', '销毁完成');
    }

1.2、常用的钩子函数

created 创建完成 可以获取this ajax加载 开启定时器
mounted 挂载完成（内容以及渲染完毕） 可以获取dom节点
beforeDestroy 销毁前 清除定时器 移除监听事件

1.3、vue父子组件生命周期执行顺序

加载渲染过程：父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted
子组件更新过程：父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated
父组件更新过程：父beforeUpdate —> 父updated
销毁过程：父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed
 

2、函数的简写

2.1、Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

2.2、v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

2.3、v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>