1 計算屬性
1) 什么是計算屬性
:::info 計算屬性就是基于現有屬性計算后的屬性:::
2) 計算屬性的作用
計算屬性用于對原始數據的再次加工3) 案例
:::warning **需求**實現如下效果
:::
使用表達式實現
```html請輸入一個字符串:
反轉后的字符串: {{msg.split('').reverse().join('')}}
<script>const vm = new Vue({el: '#app',data: {msg: '',},})
</script>
<h4 id="kqgQi">使用方法實現</h4>
```html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.js"></script></head><body><!-- 需求: 實現字符串的反轉eg. abc 轉換成 cba --><div id="app">請輸入一個字符串: <input type="text" v-model="msg" /> <br /><!-- 反轉字符串的思路1. 取出字符串中的每個字符 msg.split('') 形成一個數組2. 反轉數據. msg.split('').reverse() 形成一個反轉數組3. 將反轉數組拼接. msg.split('').reverse().join('')--><!-- 不推薦使用方法原因: 沒有緩存, 每次調用方法, 代碼會執行一次--><h3>反轉后的字符串: {{reverseMsg()}}</h3><h3>反轉后的字符串: {{reverseMsg()}}</h3><h3>反轉后的字符串: {{reverseMsg()}}</h3><h3>反轉后的字符串: {{reverseMsg()}}</h3><h3>反轉后的字符串: {{reverseMsg()}}</h3></div><script>const vm = new Vue({el: '#app',data: {msg: '',},methods: {reverseMsg() {console.log('反轉函數被執行了...')// 返回 反轉后的字符串return this.msg.split('').reverse().join('')},},})</script></body>
</html>使用計算屬性實現
```html請輸入一個字符串:
反轉后的字符串: {{reverseMsg}}
反轉后的字符串: {{reverseMsg}}
反轉后的字符串: {{reverseMsg}}
反轉后的字符串: {{reverseMsg}}
反轉后的字符串: {{reverseMsg}}
<script>const vm = new Vue({el: '#app',data: {msg: '',},computed: {// 編寫一個函數, 這個函數會被做為該計算屬性的getterreverseMsg() {console.log('計算屬性被執行了...')// 該函數的返回值, 做為訪問計算屬性的結果return this.msg.split('').reverse().join('')},},})
</script>
<h3 id="kpi31">4) 特點</h3>
:::info
1. 有緩存
2. 調試方便:::<h3 id="UuqO0">5) 作業</h3>
<h2 id="dZ1E9">2 偵聽器</h2>
<h3 id="XyPpp">1) 什么是偵聽器</h3>
:::info
可以通過watch配置項, 監聽data中已經存在的屬性的改變:::<h3 id="CIa7L">2) 語法</h3>
```javascript
watch: {// 監聽data中的firstName屬性firstName() {// 執行一系列的操作},
},
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app">姓: <input type="text" v-model="lastName" /> <br />名: <input type="text" v-model="firstName" /> <br />全名(偵聽器實現): {{fullName}}</div><script>const { createApp } = Vueconst vm = createApp({data() {return {lastName: '',firstName: '',fullName: '',}},watch: {// 偵聽lastName的變化, 當lastName變化時, 執行該函數lastName() {this.fullName = this.lastName + this.firstName},// 偵聽firstName的變化, 當firstName變化時, 執行該函數firstName() {this.fullName = this.lastName + this.firstName},},}).mount('#app')</script></body>
</html>3) 特點
在watch對應的回調函數中, 可以獲取到`新值`和 `舊值`示例
const vm = new Vue({el: '#app',data: {firstName: '',lastName: '',},// 使用watch這個配置項watch: {// 在watch對應的回調函數中, 可以得到新值和舊值// 對于簡單數據類型, 可以獲取新舊值// 對于引用數據類型, 不能獲取舊值firstName(newValue, oldValue) {// 一對多: 監聽某一個屬性的改變, 做一系列的操作console.log('firstName改變了...')console.log('新的值:', newValue)console.log('舊的值:', oldValue)},},
})
4) 深度監聽
默認情況下`watch`配置項只會對`data`中第一層的數據進行偵聽.如果第一層的數據是引用類型(如, 數組, 對象). 需要開啟深度監聽
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app">姓: <input type="text" v-model="lastName" /> <br />名: <input type="text" v-model="firstName" /> <br /><!-- 偵聽器: 一因多果(關注一個已經存在的屬性的改變) --><!-- 1. 如果是基本類型數據, 可以獲取到新舊值2. 默認是淺層次的偵聽3. 如果是引用類型, 如果需要深層次數據的改變, 開啟深度偵聽-->全名(偵聽器實現): {{fullName}}</div><script>const { createApp } = Vueconst vm = createApp({data() {return {lastName: '',firstName: '',fullName: '',obj: { name: 'xiaoming' },}},watch: {// 偵聽lastName的變化, 當lastName變化時, 執行該函數lastName(newValue, oldValue) {console.log('新的值: ', newValue)console.log('舊的值: ', oldValue)this.fullName = this.lastName + this.firstName},// 偵聽firstName的變化, 當firstName變化時, 執行該函數firstName() {this.fullName = this.lastName + this.firstName},// obj() {// console.log('obj被修改了')// },obj: {handler() {console.log('obj被修改了...')},deep: true,},},}).mount('#app')</script></body>
</html>5) 回調執行的時機
:::tips 默認情況下watch在DOM更新之前調用. 得到的是 DOM更新之前的數據
:::
可以通過flush: 'post'設置在DOM更新之后調用回調
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app">{{msg}}</div><script>const { createApp } = Vueconst vm = createApp({data() {return {msg: 'hello',}},watch: {// 默認情況下. watch在DOM更新之前調用. 得到的是 DOM更新之前的數據// msg() {// console.log(app.innerHTML)// },msg: {handler() {console.log('更新之后的DOM', app.innerHTML)},flush: 'post',},},}).mount('#app')</script></body>
</html>
