vue.js頁(yè)面加載執(zhí)行created,mounted的先后順序說(shuō)明

更新時(shí)間：2020年11月07日 16:52:26 作者：孔燚森

這篇文章主要介紹了vue.js頁(yè)面加載執(zhí)行created,mounted的先后順序說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

created頁(yè)面加載未渲染html之前執(zhí)行。

mounted渲染html后再執(zhí)行。

由于created在html模板生產(chǎn)之前所以無(wú)法對(duì)Dom進(jìn)行操作而mounted可以。

補(bǔ)充知識(shí)：關(guān)于Vue子組件data選項(xiàng)某個(gè)屬性引用子組件props定義的屬性的幾點(diǎn)思考

學(xué)過(guò)Vue的都知道Vue等MVVM框架相對(duì)于傳統(tǒng)的JS庫(kù)比如Jquery最大的區(qū)別在于數(shù)據(jù)驅(qū)動(dòng)視圖，重點(diǎn)在于數(shù)據(jù)，拿到數(shù)據(jù)后將數(shù)據(jù)通過(guò)模板{{}}語(yǔ)法或者v-html展示在頁(yè)面上。

我們也都知道在Vue父子組件可以通過(guò)Props實(shí)現(xiàn)父組件傳遞到子組件。

在項(xiàng)目開(kāi)發(fā)中，我們會(huì)遇到這種需求，頁(yè)面初始化時(shí)，父組件通過(guò)接口拿到需要數(shù)據(jù)，然后拿到的數(shù)據(jù)通過(guò)props傳遞給子組件。在子組件會(huì)有些業(yè)務(wù)上的操作來(lái)改變接受的props值

注意Vue中子組件不能直接更改props值，這樣會(huì)報(bào)錯(cuò)。

父組件需要拿到字組件改變后的值作為接口請(qǐng)求參數(shù)的值。

為了實(shí)現(xiàn)這種需求，我們一般會(huì)在data中定義某個(gè)屬性，這個(gè)屬性引用props的某個(gè)值。然后監(jiān)聽(tīng)該數(shù)據(jù)，當(dāng)該數(shù)據(jù)發(fā)生變化時(shí)，向父級(jí)組件傳遞自定義事件和改變后的值。

// 子組件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>局部組件的使用</title>
</head>
<body>
  <div id="app">

    <h1>在有template選項(xiàng)時(shí)，#app里的內(nèi)容不展示</h1>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

// 全局組件在聲明時(shí)已經(jīng)掛在到全局，可以直接使用
Vue.component('Parent', {
  template: `
    <div>
      <p>我是父組件</p>
      <Child :childDataA="msg"/>
     
    </div>
  `,
  data() {
    return {
      msg: '傳遞給子組件的數(shù)據(jù)'
    }
  },
  methods: {
    childHandler(val) {
      console.log(val)
    }
  }
})

Vue.component('Child', {
  template: `
    <div>
      <p>我是子組件</p>
      {{ childDataA }}
      <input type="text" v-model="childDataA" @input="changeValue">
    </div>
  `,
  // 指定props屬性的類(lèi)型時(shí)，會(huì)對(duì)傳入的參數(shù)進(jìn)行類(lèi)型檢查，如果不符合就會(huì)報(bào)錯(cuò)
  props: {
    childDataA: {
      type: String,
      default: ''
    },
    childDataB: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      msgA: this.childDataA,
      msgB: this.childDataB
    }
  },
  methods: {
    changeValue() {
      this.$emit('childHandler', this.msg)
    }
  }
})

// 聲明局部組件App
const App = {
  template: `
    <div>
      <Parent />
    </div>
  `
}
new Vue({
  el: '#app',
  data() {
    return {

    }
  },
  // 掛在子組件
  components: {
    App
  },
  //使用子組件
  template: '<App/>'
})
</script>
</html>

在上面的代碼中定義了子組件Child和父組件Parent,子組件的input框通過(guò)v-model綁定接受的props的childDataA,頁(yè)面初始化如下

當(dāng)在文本框輸入其他值時(shí)

會(huì)提醒你避免直接更改props屬性，而是基于props基礎(chǔ)上定義data或者計(jì)算屬性來(lái)操作。

接下來(lái)我們看另外一種情況。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>局部組件的使用</title>
</head>
<body>
  <div id="app">

    <h1>在有template選項(xiàng)時(shí)，#app里的內(nèi)容不展示</h1>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

// 全局組件在聲明時(shí)已經(jīng)掛在到全局，可以直接使用
Vue.component('Parent', {
  template: `
    <div>
      <p>我是父組件</p>
      <Child :childDataA="msg" :childDataB="msgB"/>
     
    </div>
  `,
  data() {
    return {
      msg: '傳遞給子組件的數(shù)據(jù)',
      msgB: {
        name: '我是name屬性'
      }
    }
  },
  methods: {
    
  },
  watch: {
    msg(val) {
      console.log(val)
    },
    msgB: {
      deep: true,
      handler: function(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  }
})

Vue.component('Child', {
  template: `
    <div>
      <p>我是子組件</p>
      {{ childDataA }}
      <input type="text" v-model="msgA">
      <input type="text" v-model="msgB.name">
    </div>
  `,
  // 指定props屬性的類(lèi)型時(shí)，會(huì)對(duì)傳入的參數(shù)進(jìn)行類(lèi)型檢查，如果不符合就會(huì)報(bào)錯(cuò)
  props: {
    childDataA: {
      type: String,
      default: ''
    },
    childDataB: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      msgA: this.childDataA,
      msgB: this.childDataB
    }
  },
  methods: {
    
  },
  mounted() {
    console.log(`msgA數(shù)據(jù)類(lèi)型是${typeof this.msgA}`)
    console.log(this.childDataA === this.msgA)

    console.log(`msgB數(shù)據(jù)類(lèi)型是${typeof this.msgB}`)
    console.log(this.childDataB === this.msgB)

  }
})

// 聲明局部組件App
const App = {
  template: `
    <div>
      <Parent />
    </div>
  `
}
new Vue({
  el: '#app',
  data() {
    return {

    }
  },
  // 掛在子組件
  components: {
    App
  },
  //使用子組件
  template: '<App/>'
})
</script>
</html>

頁(yè)面

可以看到無(wú)論原始類(lèi)型msgA和引用類(lèi)型值msgB都和接受的props值時(shí)嚴(yán)格相等的。

分別改變兩個(gè)文本框的值

只有45行打印出改變后的name值，也就是說(shuō)data選項(xiàng)的msgA引用props的childDataA,childDataA是一個(gè)原始類(lèi)型，msgA改變并不會(huì)導(dǎo)致childDataA發(fā)生變化。也就是父組件的msg不會(huì)發(fā)生改變。而msgB引用props的childDataB,childDataA是一個(gè)引用類(lèi)型，msgB改變導(dǎo)致childDataB發(fā)生變化。也就是父組件的data選型中的msgB發(fā)生變化。

不用深究Vue源碼是如何具體實(shí)現(xiàn)的，在子組件的mounted階段可以看到兩個(gè)值childDataA=== msgA,childDataB=== msgB。從這里我們可以得值，父組件的msgB和子組件的props中的childDataB以及data中的msgB都是的引用都是相同的，也就是引用同一個(gè)對(duì)象，其中一個(gè)屬性值發(fā)生變化時(shí)，都會(huì)發(fā)生變化。而原始類(lèi)型不會(huì)。

所以這里其實(shí)延伸到JS中的原始類(lèi)型和引用類(lèi)型相等的比較。

原始類(lèi)型只要值相等即可嚴(yán)格相等（字符串編制值也要相等）

引用類(lèi)型的比較是引用的比較，必須要求內(nèi)存地址相同。如果兩個(gè)對(duì)象屬性即屬性值完全相同，但引用不同（地址不同），那這兩個(gè)對(duì)象是不嚴(yán)格相等的。

var a = 1
b = a
b // 1
b = 2
b // 2
a // 1

var objA = {name: 'A'}
var objB = objA
objB //{name: 'A'}
objB.name = 'B
objA.name // 'B'

上面說(shuō)了這么多，有什么用呢。其實(shí)我們可以得到以下幾點(diǎn)啟發(fā)

在實(shí)際業(yè)務(wù)開(kāi)發(fā)中，如果子組件接受的props屬性值改變后，父組件data選項(xiàng)中的值也需要知道值發(fā)生變化，當(dāng)存在多個(gè)這樣的props屬性時(shí)，可以定義我一個(gè)對(duì)象，這樣可以避免多次在組件定義并在父組件接受自定義事件并作邏輯處理，手動(dòng)將父組件data中的多個(gè)屬性的值改成自定義事件接受的值。

子組件的props建議使用對(duì)象來(lái)定義，而不是數(shù)組，通過(guò)對(duì)象定義可以對(duì)接受的類(lèi)型進(jìn)行校驗(yàn)。

無(wú)論是Jq,還是Vue都是建立在原生JS的基礎(chǔ)上，所以理解熟悉原生JS特別重要。

以上這篇vue.js頁(yè)面加載執(zhí)行created,mounted的先后順序說(shuō)明就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: