溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關(guān)加載vue.js頁面時，是先加載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è)務(wù)上的操作來改變接受的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">
<h2>在有template選項時，#app里的內(nèi)容不展示</h2>
</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">
<h2>在有template選項時，#app里的內(nèi)容不展示</h2>
</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改變并不會導(dǎo)致childDataA發(fā)生變化。也就是父組件的msg不會發(fā)生改變。而msgB引用props的childDataB,childDataA是一個引用類型，msgB改變導(dǎo)致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è)務(wù)開發(fā)中，如果子組件接受的props屬性值改變后，父組件data選項中的值也需要知道值發(fā)生變化，當存在多個這樣的props屬性時，可以定義我一個對象，這樣可以避免多次在組件定義并在父組件接受自定義事件并作邏輯處理，手動將父組件data中的多個屬性的值改成自定義事件接受的值。
子組件的props建議使用對象來定義，而不是數(shù)組，通過對象定義可以對接受的類型進行校驗。
無論是Jq,還是Vue都是建立在原生JS的基礎(chǔ)上，所以理解熟悉原生JS特別重要。
以上就是加載vue.js頁面時，是先加載created還是mounted，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼