记录Vue中常用钩子，方便回头温故复习。
所有的钩子都在export default{}中
export default {
} name：声明组件名称
name: "Template", data：存储、传递数据
data(){
return{
intro:'huankai',
baidu:'http://www.baidu.com'
}
}, 组件中使用数据的几种方式：
① 双括号表达式
{{}}
——直接获取数据
② 强制数据绑定
v-bind:
或者
:
——将数据绑定在标签上，比如于a标签href等
③ 强制事件绑定
v-on:click
或者
@click
——将方法绑定在标签上
methods：声明所有的方法函数
methods:{
study(name){
// name如果没有接收到值的话，默认是一个事件对象。类型为object
alert(`${typeof name==="string"?name:""}祝你学有所成`)
}
} computed：定义计算属性.
Ⅰ、作用：
① 减少模板中的计算逻辑
② 进行数据缓存
③ 依赖固定的数据类型（响应式数据）
Ⅱ、使用：
① 在computed属性对象中定义计算属性的方法
② 在页面中使用{{方法名}}来显示计算的结果
③ 通过getter和setter实现对属性数据的显示和监视
Ⅲ、get()和set()
① 通过get()可以返回计算属性的值
② 通过set(value)可以触发修改计算属性时事件，其中value为更改后的计算属性的值。
computed: { // 配置计算属性
// 计算属性 姓名
fullNameOne: { // 单向
get() {
return this.firstName + '·' + this.lastName;
}
},
fullNameTwo: { // 双向
get() {
return this.firstName + '·' + this.lastName;
},
set(value) {
let name = value.split('·');
this.firstName = name[0];
this.lastName = name[1];
}
}
} watch：侦听器
Ⅰ、作用：
① 比computed更加灵活
② watch中可以执行任何逻辑，比如：函数节流、Ajax异步获取、甚至操作DOM
③ 依赖固定的数据类型（响应式数据）
Ⅱ、使用：
① 通过vm对象的$watch()或者watch配置来监视指定的属性
② 当属性变化时，回调函数自动调用，在函数内部进行计算
watch: {// 配置监听watch
// 监听firstName
firstName(value) {
//console.log(`watch监视到firstName发生改变：${value}`);
this.fullNameThree = value + '·' + this.lastName;
},
lastName(value) {
//console.log(`watch监视到lastName发生改变：${value}`);
this.fullNameThree = this.firstName + '·' + value;
}
} computed和watch总结
-
- computed能做的，watch都能做，反之则不行
- 能用computed的地方，尽可能使用computed
- computed是计算一个新的属性，并将该属性挂载到vm(Vue实例)上，而watch是监听已经存在并且已经挂载到vm上的数据，所以用watch同样可以监听computed计算属性的变化（其他还有data、props）
- computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖发生变化后，第一次访问computed属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数
- 从使用场景上说，computed适用于一个数据被多个数据影响，而watch适用于一个数据影响多个数据
directives：自定义局部指令
vue自定义指令
filters：自定义局部过滤器
vue自定义局部过滤器
beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
在创建初始化之前进行的操作，在整个组件尚未初始化的时候进行的操作。这是第一个生命周期函数；组件的data和methods以及页面DOM结构，都还没有初始化；所以在这个阶段阶段，什么都做不了。
created：：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
这个组件创建阶段第二个生命周期函数，此时，组件的data和methods已经可以用了；但是页面还没有渲染出来；在这个生命周期函数中，我们经常会发起Ajax请求；
created后，data和methods已经存在了，一般在这个阶段发起Ajax网络请求，请求网络数据。
-
-
beforeMount ：在挂载开始之前被调用：相关的 render 函数首次被调用。
当模板在内存中编译完成，会立即执行实例创建阶段的第三个生命周期函数，这个函数就是beforeMount，此时内存中的模板结构，还没有真正渲染到页面上；此时，页面上看不到真实的数据，用户看到的只是一个模板页面而已；
-
mounted ：el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
mounted是组件创建阶段最后的一个生命周期函数；此时，页面已经真正的渲染好了，用户可以看到真实的页面数据了；当这个生命周期函数执行完，组件就离开了创建阶段，进入到了运行中的阶段；如果大家使用到一些第三方的UI插件，而且这个插件还需要被初始化，那么，必须在mounted中来初始化插件；
mounted后，初始化已经全部完成。除了在created中发起网络请求，在mounted中发起网络请求也是可以的。
-
-
beforeUpdate ：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
在执行beforeUpdate运行中的生命周期函数的时候，数据肯定是最新的；但是页面上呈现的数据还是旧的。
-
updated ：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
页面也完成了更新，此时，data数据是最新的，同时，页面上呈现的数据也只最新的。
-
beforeDestroy ：实例销毁之前调用。在这一步，实例仍然完全可用。
当执行beforeDestroy的时候，组件即将被销毁，但是还没有真正开始销毁，此时组件还是正常可用的；data、methods等数据或方法，依旧可以被正常访问
-
destroyed ：vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
组件已完成了销毁，组件无法使用，data和methods都不可使用。