计算属性
为什么要使用计算属性？
模板上的表达式很便利，但有时候需要用到复杂的运算，写在模板表达式上面会让模板加重且难以维护。
<!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="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 双向绑定firstName 和 lastName -->
<label for="firstName">姓：</label>
<input type="text" name="" id="firstName" v-model="firstName">
<label for="lastName">名：</label>
<input type="text" name="" id="lastName" v-model="lastName">
<!-- 计算属性的函数名 在模板上以函数名赋值 -->
<b>{
{ fullName }}</b>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
},
// 计算属性
computed: {
// 函数形式 实现一个计算属性
fullName() {
// 必须要有返回值 （返回了姓 + 名 如果姓名有改动 会执行这个函数）
return this.firstName + ' ' + this.lastName
}
},
})
</script>
</html>
如果data中有和计算属性同名的会报错！！！:
var vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
fullName: '111'
},
// 计算属性
computed: {
// 函数形式 实现一个计算属性
fullName() {
// 必须要有返回值 （返回了姓 + 名 如果姓名有改动 会执行这个函数）
return this.firstName + ' ' + this.lastName
}
},
})
计算属性的get()和set()方法：
<!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="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 双向绑定firstName 和 lastName -->
<label for="firstName">姓：</label>
<input type="text" name="" id="firstName" v-model="firstName">
<label for="lastName">名：</label>
<input type="text" name="" id="lastName" v-model="lastName">
<!-- 计算属性的函数名 在模板上以函数名赋值 -->
全名：<input type="text" v-model="fullName"></input>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
},
// 计算属性
computed: {
// 对象形式 实现一个计算属性
fullName: {
get() {
// get方法返回值
// 必须要有返回值 （返回了姓 + 名 如果姓名有改动 会执行这个函数）
return this.firstName + ' ' + this.lastName
},
set(value) {
// set方法 接受一个参数 如果fullName更改会触发set方法 value为fullName新值
let name = value.split(' ');
this.firstName = name[0];
this.lastName = name[1];
}
}
},
})
</script>
</html>
注意：get方法必须要有返回值，set方法接受一个参数之后更改对象值会被触发
计算属性的特点：
- computed 监控的数据在data中没有声明
- computed 不支持异步，当conputed中有异步操作时，无法监听数据的变化
- computed 具有缓存，页面重新渲染，值不变时，会直接返回之前的计算结果，不会重新计算
- 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一般使用computed
- conputed 计算属性值是函数时，默认使用get方法。如果属性值是属性值时，属性有一个get和set方法，当数据发生变化的时候会调用set方法
侦听器：
为什么使用侦听器？
computed计算属性不能和data中的数据同名，如果要监听data中的数据或者props内的数据就要使用侦听器了
<!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="./js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handlerName">按钮</button>
<button @click="btnClick">按钮2</button>
<button @click="selectClick">查看</button>
<p>{
{family.son}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: "张三san",
family: {
father: "张三",
mother: "韩梅梅",
son: "杰克"
}
},
methods: {
handlerName() {
this.family.son = "汤姆"
},
btnClick() {
this.family.son = '杰瑞'
},
selectClick() {
console.log(this.family);
}
},
watch: {
family: {
// 对象方式侦听器 对象内必须要有handler方法
// 参1为新值 参2为旧值
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
// 控制侦听器 加载完页面自动触发一次
immediate: true,
// 如果 watch 侦听一个对象, 若对象中的属性值发生了变化,则无法被监听到
// .此时需要使用deep 选项 深度监听
deep: true
}
}
})
</script>
</html>
计算属性和侦听器的区别:
-
应用场景不同
扫描二维码关注公众号，回复： 14205890 查看本文章
- watch比较适合用于当一个对象变化来改变父组件或者子组件内多个对象或者条件的变化
- computed更加适合用于多个变量的改变引起某个数据或对象的改变时
-
执行方式不同
- conputed是监听不到异步改变的
- watch是可以监听到异步改变的
-
写法不同
- conputed一般是不需要参数的 依赖于多个项 必须有返回值
- watch 是有参数的 不需要返回值
-
有无缓存
- watch监听的是data中有的属性 conputed监听属性和data中的属性不能重名