记录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会不断调用。

• beforeDestroy ：实例销毁之前调用。在这一步，实例仍然完全可用。
  当执行beforeDestroy的时候，组件即将被销毁，但是还没有真正开始销毁，此时组件还是正常可用的；data、methods等数据或方法，依旧可以被正常访问

一般会在beforeDestory中进行收尾操作，比如：清除定时器、数据缓存等

• destroyed ：vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  组件已完成了销毁，组件无法使用，data和methods都不可使用。