The use and difference of computed and watch in Vue2 and Vue3
1.Computed
Vue2：
<template>
<div>
<span>姓：{
{
firstName }}</span>
<br />
<span>名：{
{
lastName }}</span>
<br />
<span>全名：{
{
fullName }}</span>
<br />
全名：<input type="text" v-model="fullName" />
</div>
</template>
<script>
export default {
data() {
return {
firstName: "戴",
lastName: "Dai",
};
},
computed: {
/*简写（如果不需要对fullName进行修改） */
// fullName: function () {
// return this.firstName + "-" + this.lastName;
// },
/*完整方式 */
fullName: {
get() {
return this.firstName + "-" + this.lastName;
},
set(val) {
const nameArr = val.split("-");
this.firstName = nameArr[0];
this.lastName = nameArr[1];
},
},
},
};
</script>
Vue3：
<template>
<div>
<span>姓：{
{
firstName }}</span>
<br />
<span>名：{
{
lastName }}</span>
<br />
<span>全名：{
{
fullName }}</span>
<br />
全名：<input type="text" v-model="fullName" />
</div>
</template>
<script lang="ts">
import {
computed, defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
setup() {
const state = reactive({
firstName: "戴",
lastName: "Dai",
});
/*简易写法（不需要对内容进行修改） */
// let fullName = computed(() => state.firstName + "-" + state.lastName);
/*完整写法 */
let fullName = computed({
get() {
return state.firstName + "-" + state.lastName;
},
set(val: any) {
const nameArr = val.split("-");
state.firstName = nameArr[0];
state.lastName = nameArr[1];
},
});
return {
...toRefs(state),
fullName,
};
},
});
</script>
二、watch
Vue2：
<template>
<div>
<h1>{
{
weather }}</h1>
<button @click="isHot = !isHot">切换</button>
</div>
</template>
<script>
export default {
data() {
return {
weather: "炎热",
isHot: true,
};
},
watch: {
/**简写 */
// isHot(newValue, oldValue){
// console.log("修改了isHot", newValue, oldValue);
// },
/*完整写法*/
isHot: {
immediate: true,
handler(newValue, oldValue) {
console.log("修改了isHot", newValue, oldValue);
this.weather = this.isHot === true ? "炎热" : "寒冷";
},
},
},
};
</script>
Vue3：
<template>
<div>
<h1>{
{
weather }}</h1>
<button @click="isHot = !isHot">切换</button>
</div>
</template>
<script lang="ts">
import {
defineComponent, reactive, toRefs, watch } from "vue";
export default defineComponent({
setup() {
const state = reactive({
weather: "炎热",
isHot: true,
});
watch(
() => state.isHot,
(newValue, oldValue) => {
console.log("修改了isHot", newValue, oldValue);
state.weather = state.isHot === true ? "炎热" : "寒冷";
},
{
//属性定义
immediate: true,
}
);
return {
...toRefs(state),
};
},
});
</script>
3. Difference
1. Does it support caching?
Computed (computed property) supports caching : when the dependent data has not changed, it is directly read from the cache; when the dependent data changes, it is recalculated.
watch (listening property) does not support caching : when the data changes or re-renders, the corresponding operation will be triggered, there is no caching.
2. Whether to support asynchronous
computed能完成的操作，watch都能完成，但是异步操作，只有watch能完成。
/*Vue3*/
watch(
() => state.isHot,
(newValue, oldValue) => {
console.log("修改了isHot", newValue, oldValue);
setTimeout(() => {
state.weather = state.isHot === true ? "炎热" : "寒冷";
}, 1000);
},
{
//属性定义
immediate: true,
}
);
/*Vue3*/
/*简易写法（不需要对内容进行修改） */
let fullName = computed(() => {
setTimeout(() => {
state.firstName + "-" + state.lastName;
}, 1000);
});
会直接报错，所以computed中不能进行异步操作！！！
The above is the use and difference between computed and watch in Vue2 and Vue3, please pay attention to the " Front-end Interview Questions " column.
I will share the common problems in my usual projects and the knowledge of the written test and interview with you on CSDN, and make progress together. Come on.