记录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都不可使用。
Logo

前往低代码交流专区

更多推荐