溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)什么是Vue 進(jìn)階，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
現(xiàn)在我們有一個(gè)需求，變量 firstName = "hello"，變量 lastName = "world"，我們需要將這兩個(gè)變量拼接到在前端展示，最基本的我們可以想到的就是：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <p>{{firstName + " " + lastName}}</p> <p>{{firstName}} {{lastName}}</p> </div> <script> var app = new Vue({ el: '#app', data: { firstName: 'hello', lastName: 'world', }, }) </script> </body> </html>
以上兩種寫法很明顯是可以這么做的，但是第一種我們?cè)?{{ }} 插值表達(dá)式內(nèi)進(jìn)行了代碼的計(jì)算，這是我們不建議使用方式，第二種是寫兩個(gè) {{ }} 插值表達(dá)式，看起來效果不錯(cuò)，但是如果我們要再拼接多個(gè)的話在 HTML 代碼中就顯得冗余了，后期也不好維護(hù)。接下來我們看一下如何在方法內(nèi)實(shí)現(xiàn)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{fullName()}} {{time}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
time: 1
},
methods:{
fullName(){
console.log("計(jì)算了一次");
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>上面的代碼我們?cè)?methods 里定義了一個(gè) fullName 的方法，然后通過 {{ }} 插值表達(dá)式放在 HTML 里，當(dāng)頁面加載的時(shí)候直接調(diào)用，運(yùn)行結(jié)果如下：
我們?cè)陧撁婕虞d的時(shí)候同時(shí)定義了一個(gè) time 的數(shù)據(jù)，當(dāng)我們更新這個(gè) time 數(shù)據(jù)的時(shí)候，結(jié)果如下：
我們發(fā)現(xiàn)當(dāng)我們更新 time 數(shù)據(jù)的時(shí)候，fullName 方法也調(diào)用了一次。這顯然不是很理想的。
我們?cè)賮砜匆幌吕帽O(jiān)聽器 watch 方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{fullName}} {{time}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
fullName: 'hello world',
time: 1
},
watch: {
firstName() {
console.log("firstName 更改了");
this.fullName = this.firstName + " " + this.lastName;
},
lastName() {
console.log("lastName 更改了");
this.fullName = this.firstName + " " + this.lastName;
}
}
})
</script>
</body>
</html>結(jié)果如下：
我們?cè)?Vue 實(shí)例的 watch 屬性里定義了兩個(gè)方法 firstName 和 lastName，watch 屬性中方法名和 data 屬性里的數(shù)據(jù)變量名相同，表示會(huì)實(shí)時(shí)監(jiān)聽該數(shù)據(jù)的變化，如果監(jiān)聽到變化時(shí)會(huì)實(shí)時(shí)更新 DOM。
我們先來看一下當(dāng)跟 methods 方法那樣更新 time 數(shù)據(jù)時(shí)的變化：
我們可以看出當(dāng) time 數(shù)據(jù)更新時(shí)并沒有調(diào)用 firstName 和 lastName 里的數(shù)據(jù)。當(dāng)我們更新 firstName 和 lastName 的數(shù)據(jù)時(shí)，結(jié)果如下：
我們可以看出當(dāng)我們更新 firstName 或者 lastName 的數(shù)據(jù)時(shí)，fullName 數(shù)據(jù)才會(huì)更新，這說明當(dāng)數(shù)據(jù)掛載到 DOM 上的時(shí)候會(huì)緩存起來，如果數(shù)據(jù)不更新，則還會(huì)繼續(xù)使用緩存的數(shù)據(jù)，當(dāng)數(shù)據(jù)更新時(shí)才會(huì)調(diào)用 watch 里面的方法，這就比 methods 的方法要好很多。
我們?cè)賮砜匆幌掠?jì)算屬性 computed：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{fullName}} {{time}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
time: 1
},
computed:{
fullName(){
console.log("計(jì)算了一次");
return this.firstName + " " + this.lastName;
}
}
})
</script>
</body>
</html>運(yùn)行結(jié)果如下：
我們可以看出跟 watch 比，我們并沒有在 data 里定義 fullName 數(shù)據(jù)，而是在 computed 屬性里直接定義 fullName 然后 return 出 firstName 和 lastName 的拼接結(jié)果，當(dāng)頁面呈現(xiàn)時(shí)，從輸出結(jié)果可以看出會(huì)走一次計(jì)算屬性，當(dāng)我們改變 time 數(shù)據(jù)時(shí)：
可以看出 computed 里的方法沒有被調(diào)用，當(dāng)我們改變 firstName 或者 lastName 的數(shù)據(jù)時(shí)，結(jié)果如下：
從上面的結(jié)果可以看出 computed 里面的方法被調(diào)用了，這是我們想要的結(jié)果，當(dāng)跟 fullName 有關(guān)的 firstName 和 lastName 數(shù)據(jù)改變時(shí)計(jì)算屬性才會(huì)重新計(jì)算，當(dāng)跟 fullName 無關(guān)的 time 數(shù)據(jù)變化時(shí)會(huì)用之前緩存的數(shù)據(jù)，這正是我們想要的結(jié)果。
以上三種方法進(jìn)行比較我們可以得知 methods 方法是最不理想的，監(jiān)聽器 watch 和 計(jì)算屬性 computed 兩種方法的運(yùn)行結(jié)果是一樣的，但是 計(jì)算屬性 computed 方法更簡(jiǎn)單一些。所以在 watch 和 computed 兩種方法都能實(shí)現(xiàn)的時(shí)候我們更推薦使用 computed 方法。
但是上面的 watch 和 computed 兩個(gè)方法里有個(gè)問題，就是 watch 里我們?cè)?data 里定義了一個(gè) fullName 的數(shù)據(jù)，當(dāng)我們?cè)诟?fullName 的值時(shí) DOM 會(huì)跟著改變，這個(gè)跟 firstName 和 lastName 數(shù)據(jù)更改是一樣的。但是當(dāng)我們?cè)?computed 里我們并沒有定義 fullName，當(dāng)我們更改 fullName 的數(shù)據(jù)時(shí)，如下：
我們發(fā)現(xiàn) DOM 并沒有更新，這跟 watch 比起來就顯得不友好了，其實(shí)在 computed 里有 get 和 set 兩個(gè)屬性，我們 computed 的 fullName 方法改成如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{fullName}} {{time}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
time: 1
},
computed: {
fullName: {
get() {
console.log("計(jì)算了一次");
return this.firstName + " " + this.lastName;
},
set(value) {
console.log(value);
var result = value.split(" ");
this.firstName = result[0];
this.lastName = result[1];
}
}
}
})
</script>
</body>
</html>運(yùn)行結(jié)果如下：
可以看出當(dāng)我們通過 get 和 set 就可以改變 fullName 的值使 DOM 更新了。當(dāng)頁面更新的時(shí)候先觸發(fā) fullName 中的 get 方法，并返回 fullName，當(dāng)我們改變 time 時(shí)，fullName 所依賴的 firstName 和 lastName 并沒有更改，所以就 fullName 就會(huì)去取緩存的值，在 fullName 的 set 方法里可以傳一個(gè) value 的參數(shù)，通過打印我們可以看出 value 值就是我們直接改變 fullName 的值，我們就可以通過該值來賦值改變 firstName 和 lastName，這樣 fullName 所依賴的 firstName 或 lastName 改變時(shí) DOM 就會(huì)實(shí)時(shí)更新了。
上述就是小編為大家分享的什么是Vue 進(jìn)階了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼