vue生命周期四个阶段(created和mount)

DOCTYPE html>
<html>
<head>
    <title>title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js">script>
head>
<body>

<div id="app">
     <p id="messageID">{{ message }}p>
     <p v-if="hasShow" id="VIFmessageID">v-if的文本信息{{ message }}111p>
     <p v-show="hasShow" id="VSHOWmessageID2">v-show的文本信息{{ message }}111p>
     <p ref="refAAA">refffff--的文本信息{{ message }}111p>
div>

<script type="text/javascript">

  function initShow(info, that) {
    debugger
    console.group(`${info}状态===============》`);
    console.log("%c%s", "color:red" , "el     : " + that.$el); //undefined
    
    console.log("%c%s", "color:red","data   : " + that.$data); //undefined 

    const VIFmessageID = document?.getElementById('VIFmessageID')
    const VSHOWmessageID2 = document?.getElementById('VSHOWmessageID2')
    console.log('VIFmessageID', VIFmessageID ? true : false)
    console.log('v-if', VIFmessageID?.innerHTML);
    
    console.log('VSHOWmessageID2', VSHOWmessageID2 ? true : false)
    console.log('v-show', VSHOWmessageID2?.innerHTML);

    console.log("%c%s", "color:pink","zzzzzz   : " + that.$refs['refAAA']); //undefined 
    that.$nextTick(() => {
      console.log("%c%s", "color:pink","nextTick   : " + that.$refs['refAAA']); //undefined 
    })
    // 1、定时器是异步的,先调用,也会放在任务队列,等微任务(promise)先执行完成之后再执行异步
    setTimeoutFN()
    // 2、请求接口,微任务,在这里获取refs,相当于 this.$nextTick 回调
    getUserInfo(that)
  }

  function setTimeoutFN(){
    setTimeout(() => {
      console.log('setTimeout,我应该再微任务(nextTick)之后执行')
    }, 1000)
  }

  function getUserInfo(that) {
    // 在接口请求之后,在获取refs的值不会报错,因为 promise 是微任务,相当于页面同步任务先执行完成之后再 执行
    return new Promise((resolve, reject) => {
      setTimeout(() => { // 
        console.log("%c%s", "color:green","请求接口获取refs   : " + that.$refs['refAAA']);
        resolve()
      }, 1500) // 微任务先调用,看 excutor 执行的是同步还是异步,都是异步看谁的时长短,就先执行
    })
  }

  var app = new Vue({
      el: '#app',
      data: {
          message : "这是文本信息吧???",
          hasShow: false
      },
        beforeCreate() {

          initShow('beforeCreate', this)
        },
        created: function () {
          this.hasShow = true 
          // created页面DOM还没有生成完毕,template模版字符串编译完成,在 mounted中console.log('v-if', VIFmessageID?.innerHTML); 会打印,因为页面已经完成 DOM 构建
          initShow('created创建完毕状态', this)
        },
        beforeMount: function () {
          initShow('beforeMount 挂载前状态', this)
        },
        mounted: function () {
          // mounted中只页面已经加载完成,console.log('v-if', VIFmessageID?.innerHTML); 不会打印,因为页面真是的 DOM 已经完成。
          // this.hasShow = true 
          initShow('mounted 挂载结束状态', this)
        },












        // beforeUpdate: function () {
        //     console.group('beforeUpdate 更新前状态===============》');
        //     console.log("%c%s", "color:red","el     : " + this.$el);
        //     console.log(this.$el);   
        //        console.log("%c%s", "color:red","data   : " + this.$data); 
        //        console.log("%c%s", "color:red","message: " + this.message); 
        // },
        // updated: function () {
        //     console.group('updated 更新完成状态===============》');
        //     console.log("%c%s", "color:red","el     : " + this.$el);
        //     console.log(this.$el); 
        //        console.log("%c%s", "color:red","data   : " + this.$data); 
        //        console.log("%c%s", "color:red","message: " + this.message); 
        // },
        // beforeDestroy: function () {
        //     console.group('beforeDestroy 销毁前状态===============》');
        //     console.log("%c%s", "color:red","el     : " + this.$el);
        //     console.log(this.$el);    
        //        console.log("%c%s", "color:red","data   : " + this.$data); 
        //        console.log("%c%s", "color:red","message: " + this.message); 
        // },
        // destroyed: function () {
        //     console.group('destroyed 销毁完成状态===============》');
        //     console.log("%c%s", "color:red","el     : " + this.$el);
        //     console.log(this.$el);  
        //        console.log("%c%s", "color:red","data   : " + this.$data); 
        //        console.log("%c%s", "color:red","message: " + this.message)
        // }
    })
script>
body>
html>

疑问一、使用debugger可以看出,在beforeCreate执行时,字符串模版已经编译,可以使用document.getElementById可以获取到,不受影响。

vue生命周期四个阶段(created和mount)_第1张图片

疑问二、this.$refs和document.getElementById()都是用于获取DOM元素的方法,但它们有以下几个不同点:

vue生命周期四个阶段(created和mount)_第2张图片

  • ref在mounted之后还能够获取,是等所有的字符串模版都编译完成

你可能感兴趣的:(vue,vue)