计算属性与监视
-
computed函数:
- computed是一个函数
- 传入一个回调函数,只有getter
- 传入一个对象有getter和setter
- 返回值为一个Ref对象
-
watch函数
- 监听单个数据时,第一个为要监听的数据,第二个回调函数,第三个参数为对象{immediate, deep}
- 监听多个数据(响应式的不需要箭头函数,非响应式需要),第一个参数为数组[()=>val1, ()=>val2, …],第二个为回调函数
- 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
- 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
- 通过配置deep为true, 来指定深度监视
-
watchEffect函数
- 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
- 默认初始时就会执行第一次, 从而可以收集需要监视的数据
- 监视数据发生变化时回调
<template>
<h1>计算属性和监听器</h1>
<fieldset>
<legend>姓名操作</legend>
姓氏:<input
type="text"
placeholder="请输入姓氏"
v-model="user.firstName"
/>
<br /><br />
名字:<input type="text" placeholder="请输入名字" v-model="user.lastName" />
</fieldset>
<fieldset>
<legend>计算属性和监视演示</legend>
姓名:<input type="text" placeholder="显示名字" v-model="fullName1" />
姓名:<input type="text" placeholder="显示名字" v-model="fullName2" />
姓名:<input type="text" placeholder="显示名字" v-model="fullName3" />
姓名:<input type="text" placeholder="显示名字" v-model="fullName4" />
</fieldset>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, watchEffect } from "vue";
export default defineComponent({
name: "App",
setup() {
// 定义一个响应式对象
const user = reactive({
firstName: "东方",
lastName: "不败",
});
// computed方式,传入一个回调函数
let fullName1 = computed(() => {
return user.firstName + user.lastName;
});
console.log(fullName1);
// computed方式,传入一个对象
let fullName2 = computed({
get() {
return user.firstName + "_" + user.lastName;
},
set(val: string) {
let names = val.split("_");
user.firstName = names[0];
user.lastName = names[1];
},
});
console.log(fullName2);
// watch 方式
let fullName3 = ref("");
watch(user, ({firstName, lastName}) => {
fullName3.value = firstName + '-' + lastName
}, {
immediate: true, // 是否初始化立即执行一次, 默认是false
deep: true, // 是否是深度监视, 默认是false
})
// watch 可以监视多个数据 user.firstName、user.lastName非响应式 fullName3响应式
watch([() => user.firstName, () => user.lastName, fullName3],() => {
console.log("监听到了多个数据");
})
// watchEffect方式,不需要设置immediate,默认会执行
let fullName4 = ref('')
watchEffect(() => {
fullName4.value = user.firstName + user.lastName
})
// 使用watchEffect来监听fullName3
watchEffect(() => {
const names = fullName3.value.split("-")
user.firstName = names[0]
user.lastName = names[1]
})
return {
user,
fullName1,
fullName2,
fullName3,
fullName4
};
},
});
</script>