computed和watch
我们先看下它们的主要作用和区别:请看下方的导图记录:
computed:
<template>
<div class="">
<p>num:{{ num }}</p>
<p>double1:{{ double1 }}</p>
<input type="text" v-model="double2" />
</div>
</template>
<script>
export default {
data() {
return {
num: 2,
};
},
computed: {
// 计算属性的两种写法
double1() {
return this.num * 2;
},
double2: {
get() {
return this.num * 3;
},
set(val) {
console.log("1111", val);
this.num = val;
},
},
},
};
</script>
<style lang="scss" scoped></style>
watch:
<template>
<div class="">
<input type="text" v-model="name" />
<input type="text" v-model="info.city" />
</div>
</template>
<script>
export default {
data() {
return {
name: "coco",
info: {
city: "上海",
},
};
},
watch: {
name(oldVal, val) {
// 基本类型可以拿到oldval和val
console.log("watch name", oldVal, val);
// 异步操作
setTimeout(() => {
console.log("这里是异步的操作", oldVal, val);
}, 1000);
},
info: {
handler(oldVal, val) {
// 引用类型,是拿不到oldVal的;因为引用类型是放在堆里的,引用指针是相同的,此时已经指向了新的val
console.log("watch info", oldVal, val);
},
deep: true, //深度监听
immediate: true, //进入组件的第一次就监听一次
},
},
};
</script>
<style lang="scss" scoped></style>