Vue：常用钩子

原创

KaiSarH 2021-09-01 09:45:42 ©著作权

©著作权归作者所有：来自51CTO博客作者KaiSarH的原创作品，请联系作者获取转载授权，否则将追究法律责任

记录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总结
1. computed能做的，watch都能做，反之则不行
2. 能用computed的地方，尽可能使用computed
3. computed是计算一个新的属性，并将该属性挂载到vm(Vue实例)上，而watch是监听已经存在并且已经挂载到vm上的数据，所以用watch同样可以监听computed计算属性的变化（其他还有data、props）
4. computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖发生变化后，第一次访问computed属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数
5. 从使用场景上说，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数据是最新的，同时，页面上呈现的数据也只最新的。

更新阶段beforeUpdate、updated会不断调用。