亲力亲为 vue 生命周期

shevy 发布于2019-08-21 17:54 / 2968人阅读

摘要：网上关于生命周期的文章一抓一大把看了很多收获是有的但纸上得来终觉浅最终还是决定自己上手加深一下印象测试版本程序设计如下程序运行结果如下加载时卸载时以下是我的总结不对的地方欢迎拍砖钩子调用时获取中的属性得到获取中的属性

网上关于vue生命周期的文章一抓一大把, 看了很多, 收获是有的, 但纸上得来终觉浅. 最终还是决定自己上手,加深一下印象
测试版本
vue 2.5.2

程序设计如下

</>复制代码 
function log() {
    try {
      console.log("%c%s", "color: blue", `===============data:foo ---> ${this.foo}=====================`)
    } catch (e) {
    }
    try {
      console.log("%c%s", "color: blue", `===============props:bar ---> ${this.bar}=====================`)
    } catch (e) {
    }
    try {
      console.log("%c%s", "color: blue", `===============computed:baz ---> ${this.baz}=====================`)
    } catch (e) {
    }
    try {
      console.log("%c%s", "color: blue", `===============computed:bzz ---> ${this.bzz}=====================`)
    } catch (e) {
    }
  }
  export default {
    data() {
      return {
        foo: "foo"
      }
    },
    props: {
      bar: {type: String, "default": "bar"}
    },
    computed: {
      baz() {
        return this.foo + this.bar
      },
      bzz() {
        return this.method()
      }
    },
    beforeCreate() {
      console.log("%c%s", "color: red", "
===============beforeCreate called===============")
      log.call(this)
    },
    created() {
      console.log("%c%s", "color: red", "
===============created called===============")
      log.call(this)
    },
    mounted() {
      console.log("%c%s", "color: red", "
===============mounted called===============")
      log.call(this)
    },
    methods: {
      method() {
        return "method"
      }
    },
    beforeDestroy() {
      console.log("%c%s", "color: red", "
===============beforeDestroy called===============")
      log.call(this)
    },
    destroyed() {
      console.log("%c%s", "color: red", "
===============destroyed called===============")
      log.call(this)
    }
  }

程序运行结果如下:

</>复制代码 
加载时:

</>复制代码 
卸载时:

以下是我的总结(不对的地方欢迎拍砖):

beforeCreate 钩子调用时:

获取data中的属性得到undefined
获取props中的属性报错
获取computed中的属性得到undefined

其他钩子函数中均能正常的获取到所有的值

值得注意的是在created钩子执行后 computed 属性函数中可以访问到 data props methods 中的值
甚至在destroyed 函数中依然能够正常的访问到这些值.
欢迎挑错 ^_^

云服务器 GPU云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90186.html

「Do.008」Android 实战项目（3）——Git 分支管理模型

摘要：如上图，该图没有现成的，所以是在大师原有的上修改出来的我们在开发过程中，通常以当天下午下班前十分钟为节点，合并当日修复的代码到分支另外要说的就是分支的命名了，通常我们已即将发布的版本号为后缀添加到后面，例如等等。 showImg(https://segmentfault.com/img/remote/1460000015968861?w=1920&h=1080); 首发公众号：Andr...

Soarkey 2019-08-19 10:55 评论0 收藏0
Vue的生命周期

摘要：和下面手动调用在控制台中输入在这个阶段会销毁实例，生命周期结束。外部实例中的函数显示的效果参考链接组件的生命周期详解生命周期为什么要认识Vue的生命周期 Vue的生命周期是一个非常重要的点，如果不懂Vue的生命周期，那么很多时候，就不知道Vue的实际渲染时机，程序中会出现各种bug。因此，学习Vue的生命周期是非常用必要的。 showImg(https://segmentfault...

y1chuan 2019-08-21 16:57 评论0 收藏0
详解vue生命周期

摘要：注意看下此时还是没有选项钩子函数和间的生命周期在这一阶段发生的事情还是比较多的。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变，会触发对应组件的重新渲染，先后调用和钩子函数。首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉： showImg(https://segmentfau...

svtter 2019-08-21 16:47 评论0 收藏0