Vue学习总结--生命周期钩子函数

待我称王封你为后i 2022-12-25 14:58 135阅读 0赞

vue的本质说白了是对前端的dom及对应数据的操作，

那么对其各个生命周期的操作就得有所理解，先看其官网上的一张图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70][]

钩子函数如何使用，看下面的示例：

new Vue({
      data: {
        a: 1
      },
      created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
      }
    })

在使用过程中，官方特意提出如下注意事项：

不要在选项 property 或回调上使用箭头函数，
    比如 
    created: () => console.log(this.a) 
    或 
    vm.$watch('a', newValue => this.myMethod())。
    因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，
    经常导致
     Uncaught TypeError: Cannot read property of undefined 
    或 
    Uncaught TypeError: this.myMethod is not a function 之类的错误。

至于各个钩子函数在何时使用，当你理解了其意思后，只能根据实际业务去自行判断；

列如：

我经常会将初始化页面时用到的一些调用后端接口加载数据的请求放在created中去执行；

而对于一些输入值后的校验会经常放在updated中去执行。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70]: /images/20221120/7e3a5785ccd249588074714a963df56b.png

Vue学习总结--生命周期钩子函数

发表评论取消回复

还没有评论，来说两句吧...

相关阅读