1 計(jì)算屬性
這邊以姓名案例，來介紹計(jì)算屬性
<body>
<div id="root">
<!-- 姓：<input type="text" v-model:value="firstName"><br>
名：<input type="text" v-model:value="lastName"><br> -->
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
全名：<span>{{fullName}}</span><br>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
firstName: '張',
lastName: '三'
},
// 計(jì)算屬性
computed: {
// 1.完整寫法
fullName: {
// get有什么作用？當(dāng)有人讀取fullName時(shí)，get就會(huì)被調(diào)用，且返回值就作為fullName的值
get() {
// get函數(shù)中的this Vue已經(jīng)處理好了， 指向vm
// get什么時(shí)候被調(diào)用？1.初次讀取fullName時(shí)。2.所依賴的數(shù)據(jù)發(fā)生變化時(shí)
// 會(huì)有緩存，只調(diào)用一次，如果依賴的數(shù)據(jù)沒有變化，那么不會(huì)重新調(diào)用get方法，直接走緩存
return this.firstName.slice(0, 3) + '-' + this.lastName
},
// set什么時(shí)候被調(diào)用？當(dāng)fullName被修改時(shí)。
set(value) {
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
// 2. 簡寫寫法：確定了計(jì)算屬性只讀不改才能用簡寫形式
// 可以直接將fullName函數(shù)當(dāng)做一個(gè)屬性來用
// fullName() {
// return this.firstName.slice(0, 3) + '-' + this.lastName
// }
}
})
</script>
</body>
計(jì)算屬性主要依靠它的返回值
?
2 監(jiān)視屬性
這邊以天氣案例，來介紹監(jiān)視屬性
<body>
<div id="root">
<h2>今天天氣很{{info}}</h2>
<button @click="change">切換天氣</button>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
isHot: true
},
methods: {
change() {
this.isHot = !this.isHot
}
},
computed: {
info() {
return this.isHot ? '炎熱' : '涼爽'
}
},
watch: {
isHot: {
immediate: false, // 初始化時(shí)如果為true,就是讓handler調(diào)用一下
// handler什么時(shí)候調(diào)用呢？ -> 當(dāng)isHot發(fā)生改變的時(shí)候
handler(newValue, oldValue) {
console.log('isHot被修改了')
console.log(newValue, oldValue)
}
}
}
})
// 這樣寫也可以
// vm.$watch('isHot', {
// immediate: true,
// handler(newValue, oldValue) {
// console.log('isHot被修改了')
// console.log(newValue, oldValue)
// }
// })
</script>
</body>2.1 深度監(jiān)視
watch: {
isHot: {
// immediate: false, // 初始化時(shí)如果為true,就是讓handler調(diào)用一下
// handler什么時(shí)候調(diào)用呢？ -> 當(dāng)isHot發(fā)生改變的時(shí)候
handler(newValue, oldValue) {
console.log('isHot被修改了')
console.log(newValue, oldValue)
}
},
// 1. 監(jiān)視多級結(jié)構(gòu)中某個(gè)屬性的變化
'numbers.a': function (newValue, oldValue) {
console.log('a被修改了')
console.log(newValue, oldValue)
},
// 2. 監(jiān)視多級結(jié)構(gòu)中所有屬性的變化
numbers: {
deep: true,
handler() {
console.log('numbers被修改了')
}
}
}2.2 簡寫形式
watch: {
// 1. 完整寫法
isHot: {
immediate: false, // 初始化時(shí)如果為true,就是讓handler調(diào)用一下
deep: true, // 深度監(jiān)視
// handler什么時(shí)候調(diào)用呢？ -> 當(dāng)isHot發(fā)生改變的時(shí)候
handler(newValue, oldValue) {
console.log('isHot被修改了')
console.log(newValue, oldValue)
}
},
// 2. 簡寫
isHot(newValue, oldValue) {
console.log('isHot被修改了')
console.log(newValue, oldValue)
}
}2.3 使用監(jiān)視屬性實(shí)現(xiàn)姓名案例
<body>
<div id="root">
<!-- 姓：<input type="text" v-model:value="firstName"><br>
名：<input type="text" v-model:value="lastName"><br> -->
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
全名：<span>{{fullName}}</span><br>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
firstName: '張',
lastName: '三',
fullName: '張-三'
},
watch: {
firstName(newValue) {
console.log(this)
this.fullName = newValue + '-' + this.lastName
},
lastName(newValue) {
this.fullName = this.firstName + '-' + newValue
}
}
})
</script>
</body>
?文章來源：http://www.zghlxwxcb.cn/news/detail-829584.html
3 computed 和 watch 的比較
文章來源地址http://www.zghlxwxcb.cn/news/detail-829584.html
到了這里，關(guān)于Vue核心基礎(chǔ)3：計(jì)算屬性和監(jiān)視屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
