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: {
// 编写一个函数, 这个函数会被做为该计算属性的getter
reverseMsg() {
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 } = Vue
const 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 } = Vue
const 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 } = Vue
const 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>