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

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

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

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

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

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

補充知識：關(guān)于Vue子組件data選項某個屬性引用子組件props定義的屬性的幾點思考

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

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

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

注意Vue中子組件不能直接更改props值，這樣會報錯。

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

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

// 子組件
<!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選項時，#app里的內(nèi)容不展示</h1>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

// 全局組件在聲明時已經(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屬性的類型時，會對傳入的參數(shù)進行類型檢查，如果不符合就會報錯
  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框通過v-model綁定接受的props的childDataA,頁面初始化如下

當在文本框輸入其他值時

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

接下來我們看另外一種情況。

<!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選項時，#app里的內(nèi)容不展示</h1>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

// 全局組件在聲明時已經(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屬性的類型時，會對傳入的參數(shù)進行類型檢查，如果不符合就會報錯
  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ù)類型是${typeof this.msgA}`)
    console.log(this.childDataA === this.msgA)

    console.log(`msgB數(shù)據(jù)類型是${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>

頁面

可以看到無論原始類型msgA和引用類型值msgB都和接受的props值時嚴格相等的。

分別改變兩個文本框的值

只有45行打印出改變后的name值，也就是說data選項的msgA引用props的childDataA,childDataA是一個原始類型，msgA改變并不會導致childDataA發(fā)生變化。也就是父組件的msg不會發(fā)生改變。而msgB引用props的childDataB,childDataA是一個引用類型，msgB改變導致childDataB發(fā)生變化。也就是父組件的data選型中的msgB發(fā)生變化。

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

所以這里其實延伸到JS中的原始類型和引用類型相等的比較。

原始類型只要值相等即可嚴格相等（字符串編制值也要相等）

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

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'

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

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

子組件的props建議使用對象來定義，而不是數(shù)組，通過對象定義可以對接受的類型進行校驗。

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

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

您可能感興趣的文章: