vue 中computed和watch的区别

computed与watch的区别

首先，computed是计算属性，watch是监听，监听data中的数据变化。

computed的计算属性它支持缓存，只有当依赖项发生改变的时候，它才会重新计算，否则它用的就是缓存的值。watch不支持缓存，当被监听的数据发生变化的时候，watch 才会执行。

computed第一次加载的时候就执行一次，watch初次加载时，不执行。但是vue提供了一种immediate的属性，开启初次加载时执行，还有一个开启深度监听的属性deep（开启深度监听，监听的引用类型的数据，即对象的子属性发生变化，就会触发watch）。

computed中的函数必须return出结果，而watch只是调用对应的函数，函数中可以写异步。所以，这也经常是很多人说watch支持异步的操作。

computed是一个属性受到多个属性的影响，用的最多的就是购物车，watch 一个数据影响多条数据，如搜索，高性能的消耗操作，watch为最佳。

computed

 data() {return {message: 'Hello'};},
computed: {message () {return this.message.split('').reverse().join('')},},

<template><div class="person">姓：<input type="text" v-model="firstName"> <br>名：<input type="text" v-model="lastName"> <br>全名：<span>{{fullName}}</span> <br><button @click="changeFullName">全名改为：li-si</button></div>
</template>
<script setup lang="ts" name="App">import {ref,computed} from 'vue'let firstName = ref('zhang')let lastName = ref('san')// 计算属性——只读取，不修改/* let fullName = computed(()=>{return firstName.value + '-' + lastName.value}) */// 计算属性——既读取又修改let fullName = computed({// 读取get(){return firstName.value + '-' + lastName.value},// 修改set(val){console.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeFullName(){fullName.value = 'li-si'} 
</script>