vue.js頁面加載執(zhí)行created,mounted的先后順序說明
created頁面加載未渲染html之前執(zhí)行。
mounted渲染html后再執(zhí)行。
由于created在html模板生產之前所以無法對Dom進行操作而mounted可以。
補充知識：關于Vue子組件data選項某個屬性引用子組件props定義的屬性的幾點思考
學過Vue的都知道Vue等MVVM框架相對于傳統(tǒng)的JS庫比如Jquery最大的區(qū)別在于數(shù)據(jù)驅動視圖，重點在于數(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里的內容不展示</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 全局組件在聲明時已經掛在到全局，可以直接使用
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基礎上定義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里的內容不展示</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 全局組件在聲明時已經掛在到全局，可以直接使用
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中的原始類型和引用類型相等的比較。
原始類型只要值相等即可嚴格相等（字符串編制值也要相等）
引用類型的比較是引用的比較，必須要求內存地址相同。如果兩個對象屬性即屬性值完全相同，但引用不同（地址不同），那這兩個對象是不嚴格相等的。
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的基礎上，所以理解熟悉原生JS特別重要。
以上這篇vue.js頁面加載執(zhí)行created,mounted的先后順序說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了vue3使用Vite打包組件庫從0搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
vue如何統(tǒng)一樣式(reset.css與border.css)
這篇文章主要介紹了vue如何統(tǒng)一樣式(reset.css與border.css)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在Vue3中可以使用ref函數(shù)來創(chuàng)建一個響應式的變量,通過將ref函數(shù)應用于一個組件實例,我們可以獲取到該組件的實例對象,這篇文章主要給大家介紹了關于vue3?ref獲取組件實例的詳細圖文教程,需要的朋友可以參考下2023-10-10
解決vue動態(tài)路由異步加載import組件,加載不到module的問題
這篇文章主要介紹了解決vue動態(tài)路由異步加載import組件,加載不到module的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
解決v-for中使用v-if或者v-bind:class失效的問題
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue組件傳值異步問題子組件拿到數(shù)據(jù)較慢解決
這篇文章主要為大家介紹了Vue組件傳值異步中子組件拿到數(shù)據(jù)較慢的問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08
vue報錯"vue-cli-service‘不是內部或外部命令,也不是...”的解決辦法
這篇文章主要介紹了vue報錯"vue-cli-service‘不是內部或外部命令，也不是...”的解決辦法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
列表頁面顯示數(shù)據(jù)，點擊跳轉到對應的詳情頁，詳情頁可以添加并跳轉到購物車，購物車具有常見功能，這篇文章主要介紹了vue?實現(xiàn)列表跳轉至詳情且能添加至購物車,需要的朋友可以參考下2022-10-10
Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)
日常業(yè)務開發(fā)中，form表單校驗是一個很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
公司最近有這么個需求,在線預覽pdf功能,正好有點時間,稍微整理記錄一下,這篇文章主要給大家介紹了關于前端預覽pdf文件流的相關資料,需要的朋友可以參考下2023-09-09