本文详细介绍了Vue.js中的计算属性和监听器。计算属性用于根据已有属性计算新属性，利用getter和setter，首次读取和依赖数据变化时执行。计算属性具有缓存机制，提高效率。示例展示了计算属性的读取和修改。同时，文章讨论了监听器，当被监视的属性变化时，回调函数自动调用，包括如何设置深度监视。
一.计算属性
1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了objcet.defineproperty方法提供的getter和setter.
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便.
5.备注:
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
<!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="../vue2.0+3.0/vue.js"></script>
</head>
<body>
<!--
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了objcet.defineproperty方法提供的getter和setter.
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便.
5.备注:
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
-->
<div id="root">
姓：<input type="text" v-model="firstName"><br><br>
名：<input type="text" v-model="lastName"><br><br>
全名：<span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
// get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时.
get(){
// console.log(this);//此处的this是vm
// console.log(this.firstName);
return this.firstName + '-' + this.lastName
},
// set什么时候调用？当fullName被修改时。
set(value){
// split 截取字符串
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</body>
</html>
当我们只考虑读取不考虑修改时，是可以简写的。
<div id="root">
姓：<input type="text" v-model="firstName"><br><br>
名：<input type="text" v-model="lastName"><br><br>
全名：<span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
// 完整写法
// fullName:{
// get(){
// return this.firstName + '-' + this.lastName
// },
// set(value){
// const arr = value.split('-')
// this.firstName = arr[0]
// this.lastName = arr[1]
// }
// }
// 简写 只考虑读取不考虑修改的时候才能简写 也就是只有getter时
fullName(){
return this.firstName + '-' + this.lastName
}
}
})计算属性的复杂使用
现在有一个数组数据books，里面包含许多book对象，要求计算出所有book的总价格totalPrice
books:[
{id:110,name:"JavaScript从入门到入土",price:119},
{id:111,name:"Java从入门到放弃",price:80},
{id:112,name:"编码艺术",price:99},
{id:113,name:"代码大全",price:150},
]
实现的方法有很多
<!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="../vue2.0+3.0/vue.js"></script>
</head>
<body>
<div id="root">
<h2>总价：{{totalPrice}}</h2>
</div>
<script>
Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序
const vm = new Vue({
el:'#root',
data(){
return {
books: [{
id: 110,
name: "JavaScript从入门到入土",
price: 119
},
{
id: 111,
name: "Java从入门到放弃",
price: 80
},
{
id: 112,
name: "编码艺术",
price: 99
},
{
id: 113,
name: "代码大全",
price: 150
},
]
}
},
computed:{
//传统的for循环
totalPrice(){
let price = 0;
for (let i = 0; i < this.books.length; i++) {
price += this.books[i].price
}
return price
}
// for...in
// totalPrice(){
// let price = 0;
// for(let item in this.books){
// price += this.books[item].price
// }
// return price
// }
//for...of方法
// totalPrice(){
// let price = 0;
// for(let item of this.books){
// price += item.price
// }
// return price
// }
// map方法
// totalPrice(){
// let price = 0;
// this.books.map(item=>{
// price += item.price
// })
// return price
// }
// forEach方法
// totalPrice(){
// let price = 0;
// this.books.forEach(item => {
// price += item.price
// });
// return price
// }
// filter方法
// totalPrice(){
// let price = 0;
// this.books.filter(item=>{
// price += item.price
// })
// return price
// }
// reduce方法
// totalPrice(){
// let price = 0;
// return this.books.reduce((total,item)=>{
// return total + item.price
// },0)
// }
// some方法
// totalPrice(){
// let price = 0;
// this.books.some(item=>{
// price += item.price
// })
// return price
// }
}
})
</script>
</body>
</html>
二.监听器
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
<!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="../vue2.0+3.0/vue.js"></script>
</head>
<body>
<!--
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
immediate:true,//初始化时让handler调用一下
// handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue);
}
}
}
})
// vm.$watch('isHot',{
// immediate:true,//初始化时让handler调用一下
// // handler什么时候调用？当isHot发生改变时。
// handler(newValue,oldValue){
// console.log('isHot被修改了',newValue,oldValue);
// }
// })
</script>
</body>
</html>深度监视 deep
<!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="../vue2.0+3.0/vue.js"></script>
</head>
<body>
<!--
深度监视:
(1).vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注:
(1).vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr>
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我b+1</button>
</div>
<script>
Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:2
}
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
immediate:true,//初始化时让handler调用一下
deep:true,
// handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue);
}
},
//监视多级结构中某个属性的变化
// 'number.a':{
// handler(){
// console.log('a被改变了');
// }
// }
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log('numbers改变了');
}
}
}
})
</script>
</body>
</html>
扫一扫
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
