computed 和watch的区别: computed 不能直接监听值 和 watch能直接监听值 !!!
1)computed依赖缓存,data不变则不会重新计算,性能优化的一种形式
2)watch 如何深度监听deep :true, 引用类型深度监听拿不到旧的值,默认是浅监听
<p>num的值:{{num}}</p>
<p>double1的值: {{double1}}</p>
<input type="text" v-model="double2">
<input type="text" v-model="name">
<input type="text" v-model="info.city">
<script type="text/ecmascript-6">
export default {
data() {
return {
message: '恭喜你,这是一条<b>成功</b>消息',
num: 20,
name: 'liu_man',
info: {
city: '重庆'
}
}
},
// computed默认只有get 方法,如果要双向绑定需重写set方法
computed: {
double1() {
return this.num * 2
},
double2: {
set() {
console.log('set');
return this.num * 2
},
get() {
return this.num / 2
}
}
},
watch: {
name(val,oldval) {
console.log(val, oldval); // 监听值类型,可以拿到旧的值
},
info: {
handler(val, oldval) {
console.log('已触发watch info');
console.log(val, oldval); // 监听引用类型,不能拿到旧的值,因为引用类型存放在堆中,指向同一个内存地址
},
deep: true // 深度监听
}
}
}
</script>
通过computed传参的情况
<template>
<div>{{amount(2.213)}}</div>
</template>
<script>
export default {
data() {
return {
price: 1000
};
},
computed: {
amount() {
return (n) => {
return Number(n).toFixed(2)
}
}
}
};
</script>