computed函数,是用来定义计算属性的,计算属性不能修改。
<template>
<div id="app">
<div>小李今年:{{ age }}岁</div>
<br />
<div>小李明年:{{ newAge }}岁</div>
</div>
</template>
<script>
import { computed, ref } from "vue";
export default {
name: "App",
setup() {
const age = ref(20);
const newAge = computed(() => {
return age.value + 2;
});
return {age,newAge}
},
};
</script>
<style>
</style>
高级用法
<template>
<div id="app">
<div>小李今年:{{ age }}岁</div>
<br />
<div>小李明年:{{ newAge }}岁</div>
</div>
</template>
<script>
import { computed, ref } from "vue";
export default {
name: "App",
setup() {
const age = ref(20);
// const newAge = computed(() => {
// return age.value + 2;
// });
const newAge = computed({
// get函数,获取计算属性的值
get() {
return age.value + 2;
},
// set函数,当你给计算属性设置值的时候触发
set(val) {
age.value = value - 2;
},
});
return { age, newAge };
},
};
</script>
<style>
</style>
总结
给computed传入函数,返回值就是计算属性的值给computed传入对象,get获取计算属性的值,set监听计算属性改变。
watch 侦听器
作用:
- 监听ref定义的响应式数据
- 监听多个响应式数据数据
- 监听reactive定义的响应式数据
- 监听reactive定义的响应式数据,某一个属性
- 深度监听
- 默认执行
<template>
<div class="container">
<div>
<p>{{ obj.brand.name }}</p>
<button @click="updateBrandName">改品牌名字</button>
</div>
</div>
</template>
<script>
import { reactive, ref, watch } from "vue";
export default {
name: "App",
setup() {
const count = ref(0);
const add = () => {
count.value++;
};
// 当你需要监听数据的变化就可以使用watch
// 1. 监听一个ref数据
// 1.1 第一个参数 需要监听的目标
// 1.2 第二个参数 改变后触发的函数
const obj = reactive({
brand: {
id: 1,
name: "宝马",
},
});
const updateBrandName = () => {
obj.brand.name = "奔驰";
};
// 2. 监听一个reactive数据
watch(obj, () => {
console.log("数据改变了");
});
watch(
() => obj.brand,
() => {
console.log("brand数据改变了");
},
{
// 5. 需要深度监听
deep: true,
// 6. 想默认触发
immediate: true,
}
);
return { obj, updateBrandName };
},
};
</script>```