vue的计算属性与监听属性的区别

计算属性：computed，

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性。

import { computed, ref } from "vue";
export default {
  setup() {
    const count = ref(0); //声明
    const computed = computed(() => {
      return count.value * 2;
});

侦听属性：watch，(有两个参数，new，old，分别代表改变后和改变前的值)

侦听属性的命名,必须是data,computed,props中的变量名

(计算属性监测的是某个值的依赖的变化，侦听属性监测的是值自身的变化)

import { computed, watch, ref } from "vue";
export default {
  setup() {
    const count = ref(0); //声明
    watch( count , ()=>{
  // 逻辑代码
    })
    return { count, computed };
  },
};

区别：

1. 计算属性是通过计算得出的新属性，一般用来处理复杂的逻辑，会根据依赖的属性变化自动更新。计算属性是基于它的依赖缓存的，只有当依赖属性发生改变时才会重新计算。
2. 监听属性用来观察和响应Vue实例中的数据变化，一旦监听的属性发生变化，就会触发回调函数，可以用来做一些比较简单的逻辑处理。

总的来说，计算属性适合处理复杂的逻辑，而监听属性适合做一些简单的数据处理或是监听属性的变化来做对应的操作。