文章目录
一、计算属性computed
1.1. 概念:
- 基于现有的数据,计算出来的新属性。 依赖的数据变化,自动重新计算。
- 计算属性会对计算出来的结果缓存,再次使用直接读取缓存,只有依赖项变化了才会自动重新计算,并再次缓存
1.2. 语法
- 声明在 computed 配置项中,一个计算属性对应一个函数
- 使用起来和普通属性一样使用 {{ 计算属性名}}
1.3. 注意
- computed配置项和data配置项和methods配置项是同级的
- computed中的计算属性不能和data中的属性同名,使用方式和data中的属性一样
- computed中计算属性内部的this指向的是Vue实例
1.4. 完整写法
- 计算属性默认的简写,只能读取访问,不能 “修改”。
- 如果要 “修改” → 需要写计算属性的完整写法(读取访问出发getter,修改出发setter)。
1.5. 计算属性禁用箭头函数
注意,不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例(组件实例),this.a 将是 undefined。
1.5. 案例
<!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>
<style>
table {
border: 1px solid #000;
text-align: center;
width: 240px;
}
th,
td {
border: 1px solid #000;
}
h3 {
position: relative;
}
</style>
</head>
<body>
<div id="app">
<h3>小黑的礼物清单</h3>
<table>
<tr>
<th>名字</th>
<th>数量</th>
</tr>
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.num }}个</td>
</tr>
</table>
<!-- 目标:统计求和,求得礼物总数 -->
<p>礼物总数:{{ totalCount }} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
// 现有的数据
list: [
{
id: 1,
name: "篮球",
num: 1,
},
{
id: 2,
name: "玩具",
num: 2,
},
{
id: 3,
name: "铅笔",
num: 5,
},
],
},
computed: {
totalCount() {
// 基于现有的数据,编写求值逻辑
// 计算属性函数内部,可以直接通过 this 访问到 app 实例
// console.log(this.list)
// 需求:对 this.list 数组里面的 num 进行求和 → reduce
let total = this.list.reduce((sum, item) => sum + item.num, 0);
return total;
},
},
});
</script>
</body>
</html>
1.6. 计算属性 vs 方法
computed计算属性
- 作用:封装了一段对于数据的处理,求得一个结果
语法:
- 写在computed配置项中
- 作为属性,直接使用
- js中使用计算属性: this.计算属性
- 模板中使用计算属性:{{计算属性}}
methods方法:
- 作用:给Vue实例提供一个方法,调用以处理业务逻辑。
语法:
- 写在methods配置项中
- 作为方法调用
- js中调用:this.方法名()
- 模板中调用 {{方法名()}} 或者 @事件名=“方法名”
计算属性的优势:
计算属性会对计算出来的结果缓存,再次使用直接读取缓存,只有依赖项变化了才会自动重新计算,并再次缓存,methods方法渲染一次会出发一次方法调用
<!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>
<style>
input {
width: 30px;
}
</style>
</head>
<body>
<div id="app">
姓:<input type="text" v-model="firstName" /> + 名:
<input type="text" v-model="lastName" /> = <span>{{ fullName }}</span
><br /><br />
<button @click="changeName">改名卡</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: "刘",
lastName: "备",
},
methods: {
changeName() {
this.fullName = "黄忠";
},
},
computed: {
// 简写 → 获取,没有配置设置的逻辑
// fullName () {
// return this.firstName + this.lastName
// }
// 完整写法 → 获取 + 设置
fullName: {
// (1) 当fullName计算属性,被获取求值时,执行get(有缓存,优先读缓存)
// 会将返回值作为,求值的结果
get() {
return this.firstName + this.lastName;
},
// (2) 当fullName计算属性,被修改赋值时,执行set
// 修改的值,传递给set方法的形参
set(value) {
// console.log(value.slice(0, 1))
// console.log(value.slice(1))
this.firstName = value.slice(0, 1);
this.lastName = value.slice(1);
},
},
},
});
</script>
</body>
</html>
二、侦听器watch
2.1. 概述
watch是 vue 中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作。
Vue官网很明确的建议我们这样使用watch侦听属性:当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
2.2. 用法
watch: {
被监听的数据: {
handler(数据改变后的值, 数据改变之前的值) {
相关代码逻辑...
}
}
}
- 被监听的数据:data中定义的数据;
- 数据改变后的值:该数据改变后的新值;
- 数据改变之前的值:该数据改变之前的值。
2.3. watch监听单个简单数据类型
<template>
<!--v-model 双向绑定模型数据-->
<div>
输入: <input type="text" v-model="num">
</div>
</template>
<script>
export default {
// vue页面的名称
name: "Home",
// 模型数据中加上绑定的值num
data() {
return {
num: "",
};
},
// 监听v-model中值的变化
watch: {
num: {
handler(newVal, oldVal) {
console.log(`新的值: ${newVal}`);
console.log(`旧的值: ${oldVal}`);
console.log("------------------");
},
}
},
};
</script>
2.4. 监听复杂数据类型的某个属性的变化
<template>
<!--v-model 双向绑定模型数据-->
<div>
姓名: <input type="text" v-model="person.name">
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
// 模型数据有层级关系
person: {
name: ""
}
};
},
watch: {
// 监听复杂数据类型的某个属性的变化
"person.name": {
handler(newVal, oldVal) {
console.log(`新的姓名: ${newVal}`);
console.log(`旧的姓名: ${oldVal}`);
},
}
},
};
</script>
2.5. immediate (立即处理 进入页面就触发)
immediate 设为true,进入页面会立即执行handler函数。
<template>
<div>
数字: <input type="text" v-model="num">
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
num: "",
};
},
watch: {
num: {
handler(newVal, oldVal) {
},
// immediate 设为true,进入页面会立即执行handler函数。
immediate: true
}
},
};
</script>
2.6. deep 深度监听
对象和数组都是复杂数据类型,复杂数据类型存的是地址值,地址没有变,不会触发watch。这时我们需要进行深度监听,就需要加上一个属性 deep,值设为 true,使用deep属性可以监测到整个对象所有属性值的变化,某个属性发生变化,watch都会触发监听该对象。
<template>
<!--v-model 双向绑定模型数据-->
<div>
姓名: <input type="text" v-model="person.name">
</div>
<div>
年龄: <input type="text" v-model="person.age">
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
person: {
name: "",
age: ""
}
};
},
watch: {
person: {
// 当name或age发生改变时都能触发监听事件
handler(newVal, oldVal) {
alert("name or age have changed")
},
deep: true
}
},
};
</script>
2.7. 计算属性的简写
如果只是监听单个简单的数据,使用watch的简写形式就可以满足需求。
<template>
<!--v-model 双向绑定模型数据-->
<div>
数字: <input type="text" v-model="num">
</div>
</template>
<script>
export default {
// vue页面的名称
name: "Home",
// 模型数据中加上绑定的值num
data() {
return {
num: "",
};
},
// 监听v-model中值的变化
watch: {
num: {
handler(newVal, oldVal) {
console.log(`新的数字: ${newVal}`);
console.log(`旧的数字: ${oldVal}`);
console.log("这里面可以将改变的值发送请求到后端,也可以做级联(下拉框的值的改变触发另一个下拉框值的改变),可以满足很多需求上的事情,");
},
}
},
};
</script>
三、computed和watch的区别
computed主要用于对同步数据的处理,watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑
computed是计算属性
- 支持缓存,只有依赖数据发生改变,才会重新进行计算
- 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
- computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过的数据通过计算得到的
- 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
- 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
watch是侦听属性
- 不支持缓存,数据变,直接会触发相应的操作;
- watch支持异步;
- 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
- 当一个属性发生变化时,需要执行对应的操作;一对多;