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>

watch

参观下面的网址（个人觉得挺好）

Vue中的watch监听属性，使用详细（vue2和vue3监听属性watch的使用）_vue2 watch deep-CSDN博客