Vue3监听属性与Computed的区别详解

import { ref, watch } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
  
    watch(count, (newValue, oldValue) => {  
      console.log(`Count changed from ${oldValue} to ${newValue}`);  
    });  
  
    return {  
      count  
    };  
  }  
};

import { reactive, watch } from 'vue';  
  
export default {  
  setup() {  
    const state = reactive({  
      count: 23,  
      name: 'Jiaranerzhi'  
    });  
  
    watch(  
      () => [state.count, state.name],  
      ([newCount, newName], [oldCount, oldName]) => {  
        console.log(`Count changed from ${oldCount} to ${newCount}`);  
        console.log(`Name changed from ${oldName} to ${newName}`);  
      }  
    );  
  
    return {  
      ...state  
    };  
  }  
};

watch(  
  state,  
  (newValue, oldValue) => {  
    // 当 state 中的任何属性发生变化时触发  
  },  
  { deep: true }  
);

import { ref, computed } from 'vue';  
  
export default {  
  setup() {  
    const firstName = ref('Alen');  
    const lastName = ref('Jia');  
  
    const fullName = computed(() => {  
      return `${firstName.value} ${lastName.value}`;  
    });  
  
    return {  
      firstName,  
      lastName,  
      fullName  
    };  
  }  
};