生命周期

作者: Valley4Z | 来源:发表于2018-08-08 11:27 被阅读4次

    示例代码:

    <template>
      <div>
        <text class="title" v-for="(value, i) in list" :key="i" >{{value}}</text>
      </div>
    </template>
    
    <style scoped>
      .title {font-size: 48px;}
    </style>
    
    <script>
      var initMessage
      module.exports = {
        data: function () {
          return {
            list: ['Lifecycle List']
          }
        },
        init: function () {
          initMessage = 'component init: nothing more happen even the data initialization'
          console.log('init:', this.list)
        },
        created: function () {
          this.list.push(initMessage)
          this.list.push('component created: data observed')
          console.log('created:', this.list)
        },
        mounted: function () {
          this.list.push('component mounted: virtual dom generated')
          console.log('mounted:', this.list)
        }
      }
    </script>
    

    控制台打印结果:

    [Log] created: – ["Lifecycle List", undefined, "component created: data observed"]

    [Log] mounted: - ["Lifecycle List", undefined, "component created: data observed", "component mounted: virtual dom generated"]

    日志中,init 方法中的内容并没有打印出来,而且 this.list.push(initMessage) 的结果为 undefined,整个 init 方法好像并没有执行;
    这是因为 init 内一般用于初始化一些内部变量,绑定一些自定义事件,这时还没有数据绑定,没有创建vdom,所以不能通过this获取到data和methods,也不能获取vdom的节点

    相关文章

      网友评论

        本文标题:生命周期

        本文链接:https://www.haomeiwen.com/subject/itvtbftx.html