計算屬性和methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<my-cpn></my-cpn>
</div>
<template id="tmp">
<div>
<p>反轉(zhuǎn)信息1： {{reversedMessage1}}</p>
<p>反轉(zhuǎn)信息2： {{reversedMessage2()}}</p>
<p>{{now}}</p>
<button @click="() => $forceUpdate()">強制更新</button>
<input type="text" v-model="message">
</div>
</template>
<script>
Vue.component('my-cpn', {
template: "#tmp",
data() {
return {
message: "hello vue"
}
},
computed: {
reversedMessage1() {
console.log("執(zhí)行了計算屬性");
return this.message
.split("")
.reverse()
.join("")
},
now() {
return Date.now()
}
},
methods: {
reversedMessage2() {
console.log("methods方法執(zhí)行");
return this.message
.split("")
.reverse()
.join("")
}
}
})
new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
說明：
計算屬性：
- 減少模板中的計算邏輯
- 數(shù)據(jù)緩存
- 依賴固定的數(shù)據(jù)類型
代碼說明：
- 組件使用vm.$forceUpdate()迫使Vue.js實例重新渲染到推，該方法僅影響實例本身以及插入插槽內(nèi)容的子組件扁誓；
- 實例的重新渲染會使調(diào)用方法重新執(zhí)行函數(shù)筷狼；
- 計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。當(dāng)計算屬性所依賴的響應(yīng)式屬性或計算屬性的返回值發(fā)生變化時才會重新計算等舔；因此點擊按鈕，計算屬性中的代碼不會執(zhí)行；只有在更改雙向綁定的input輸入框內(nèi)容時，才重新觸發(fā)計算屬性中的方法蓉坎；
計算屬性和偵聽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{fullName}}</h2>
<label for="firstName">first</label>
<input type="text" v-model="firstName" id="firstName">
<label for="lastName">lastName</label>
<input type="text" v-model="lastName" id="lastName">
<hr>
<my-cpn></my-cpn>
</div>
<template id="tmp">
<div>
<h2>{{fullName}}</h2>
<label for="firstName">first</label>
<input type="text" v-model="firstName" id="firstName">
<label for="lastName">lastName</label>
<input type="text" v-model="lastName" id="lastName">
</div>
</template>
<script>
Vue.component('my-cpn', {
template: "#tmp",
data() {
return {
firstName: 'Jack',
lastName: 'Trump',
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
new Vue({
el: '#app',
data: {
firstName: 'Jack',
lastName: 'Trump',
fullName: ''
},
methods: {},
watch: {
firstName(val) {
this.fullName = val + " " + this.lastName
},
lastName(val) {
this.fullName = this.firstName + " " + val
}
}
})
</script>
</body>
</html>
偵聽器說明：
- 當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的磷仰。
- 使用 watch 選項允許我們執(zhí)行異步操作 (訪問一個 API)袍嬉，限制我們執(zhí)行該操作的頻率境蔼，并在我們得到最終結(jié)果前灶平，設(shè)置中間狀態(tài)。這些都是計算屬性無法做到的
- 函數(shù)節(jié)流箍土、aiax異步獲取數(shù)據(jù)逢享、操作DOM
