计算属性computed和侦听watch(2)--vue计划
1.计算属性ComPuted,1.为了处理复杂的计算逻辑而使用,比methods方法更轻便,快捷,特殊处理缓存使用更佳,methods比较消耗内存,相对而言. 2. 解决业务代码在标签里处理的问题.
*** 特别注意,计算时的属性不能再data里初始化,如data:{totalPrice:’’},computed: {totalPrice:function(){}},这样是不允许的,只能在computed里创建.
**计算属性练习1 :
苹果手机价格单价input
数量input v-model:
华为手机价格单价input
数量input v-model
小米手机价格单价input
数量input v-model
总价: 一般做法写一个div,里面进行逻辑操作,price1*num1 + price2 *num2
<div>属性计算:{{totalPrice}}</div>
computed: {
totalPrice: function() {
let {price1,num1,price2,num2,price3,num3} = this
return price1*num1 + price2 *num2
}
}
** methods也可以用这个方法计算,官方推荐计算,因为依赖缓存用计算,methods会影响性能,因为要重复调用,执行才去改变
2.watch 侦听器属性,一个属性的改变影响着多个属性会使用到watch侦听
*** watch可以看作是methods和computed的结合体
pageInfo : {
page: 1,
str: ‘’
}
// 可以在检查里调用 app来改变它们的值 ,app是绑定的id,取出所有实例属性
// 一个数据影响多个数据会用到watch,多个受依赖的数据的改变而影响的”受影响”的数据
watch: {
// 侦听单个字符
price1: function(newValue,oldValue) {
console.log(‘watch——>’, newValue,oldValue)
}
// 侦听整个对象
pageInfo: {
handler: function(newValue,oldValue) {
// 哪个值改变,显示哪个数据变化
console.log(‘watch appleInfo———’,newValue,oldValue)
},
deep: true, // true,false深度监听还是普通监听
immediate: true // true/false,是否以当前的初始值执行handler函数
}
}
3.代码如下,下面vue是通过npm安装vue的方式导入的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>
苹果手机价格:<input v-model="price1"></input>
数量:<input v-model="num1"></input>
</div>
<div>
华为手机价格:<input v-model="price2"></input>
数量:<input v-model="num2"></input>
</div>
<div>
小米手机价格:<input v-model="price3"></input>
数量:<input v-model="num3"></input>
</div>
<div>总价: {{ total }}
</div>
<div>直接计算: {{ price1 *num1 + price2* num2 + price3*num3}}</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
price1: '',
num1: 0,
price2: '',
num2: 0,
price3: '',
num3: 0,
priceInfo: {
price: '',
num: 0
}
},
computed: {
total: function() {
let {price1,num1,price2,num2,price3,num3} = this
return price1 * num1 + price2 * num2 + price3 * num3
}
},
methods() { // 写方法用的
},
watch: {
// 侦听单个属性,可以直接在检查里输入挂载的id,app来改变price1的信息或输入改变
price1: function(newValue, oldValue) {
console.log('watch---------->',newValue, oldValue)
},
// 也可以侦听整个对象
priceInfo: {
// 侦听对象用到handler方法
handler:function(newValue, oldValue) {
console.log('watch appleInfo———---------->',newValue, oldValue)
},
deep: true, // 深度侦听与普通侦听,如果为true时,会侦听详情信息,并打印handler中的信息,false则不会打印handler信息
immediate: true // true/false,是否以当前的初始值执行handler函数,为true时打印的是初始化的信息
}
}
})
</script>
</body>
</html>
