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>
watch
参观下面的网址(个人觉得挺好)
Vue中的watch监听属性,使用详细(vue2和vue3监听属性watch的使用)_vue2 watch deep-CSDN博客