计算属性之于函数，多了缓存

计算属性与puted）是一种特殊的Vue实例属性，它是一种可响应的数据计算方式。计算属性本质上是一个函数，它可以根据其他响应式数据的变化而自动更新自己的值，并且只有在必要时才会重新计算。

与之相对的是普通函数，普通函数的结果不会被缓存，每次访问时都会重新计算。

计算属性的作用

计算属性的主要用途是简化模板中的逻辑计算，将复杂的计算逻辑封装在计算属性中，从而使模板更加简洁、易于维护。例如，在一个商品列表页面中，需要根据商品价格和数量计算出总价。如果使用计算属性，只需定义一个计算属性，将商品价格和数量作为依赖，并在模板中使用这个计算属性即可。如果不使用计算属性，则需要在模板中编写复杂的计算逻辑，使模板更加臃肿。

在实际项目开发中，计算属性的应用非常广泛。例如，在表单验证中，可以使用计算属性根据表单的各个输入项来判断整个表单是否有效；在数据过滤和排序中，可以使用计算属性根据用户的选项来过滤和排序数据；在组件的样式计算中，可以使用计算属性根据组件的状态来计算样式。

使用计算属性非常简单。只需在Vue实例中定义一个computed选项，其中包含计算属性的名称和计算函数即可。例如：

<template>
  <div>
    <p>商品价格：{{ price }}</p>
    <p>商品数量：{{ quantity }}</p>
    <p>商品总价：{{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      quantity: 2
    }
  },
  computed: {
    total() {
      return this.price * this.quantity
    }
  }
}
</script>

在上面的示例中，计算属性total依赖于price和quantity，当price和quantity发生变化时，total会自动更新。

总之，计算属性是Vue3中非常有用的一种特性，可以使代码更加简洁、易于维护，同时还可以提高应用程序的性能。在实际项目中，应根据需要合理运用计算属性来优化代码。

Vue3的实际运用

Vue3提倡将组件的状态（data）、计算属性（computed）、方法（methods）以及侦听器（watch）都放在组件的setup函数中，以便更好地利用Vue3的新特性和功能。在setup函数中，可以使用Vue3新增的reactive、ref、computed和watch等函数来定义响应式数据和相应的逻辑。

下面是一个在setup函数中使用计算属性的示例：

<template>
  <div>
    <p>商品价格：{{ price }}</p>
    <p>商品数量：{{ quantity }}</p>
    <p>商品总价：{{ total }}</p>
  </div>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      price: 10,
      quantity: 2
    })

    const total = computed(() => {
      return state.price * state.quantity
    })

    return {
      price: state.price,
      quantity: state.quantity,
      total
    }
  }
}
</script>

在上面的示例中，我们使用reactive函数定义了响应式数据price和quantity，然后使用computed函数定义了计算属性total。最后，我们将price、quantity和total作为返回值返回给Vue组件，以便在模板中使用。

需要注意的是，在setup函数中，我们需要将需要暴露给模板的响应式数据和计算属性，作为返回值返回给Vue组件。因此，在上面的示例中，我们将total计算属性作为一个变量返回，而不是在computed对象中定义。

解惑Vue2选项式和Vue3组合式开发

Vue2和Vue3的选择

Human:
可以发现前面两者都使用了计算属性，那两者的写法究竟有什么区别，现在开发用的是哪种方式？为什么呢

Assistant:

Vue2和Vue3的写法确实存在差异。在Vue2中，我们通常使用computed属性来定义计算属性，而在Vue3中，我们则推荐将计算属性定义在setup函数中。

区别在于，Vue2中的计算属性是定义在组件选项中的一个对象属性，而Vue3中的计算属性则是使用computed函数定义的变量。在Vue2中，计算属性可以像普通的数据属性一样被访问和使用，而在Vue3中，计算属性需要在setup函数中被显式地返回，以便在模板中使用。

对于现在的开发，Vue3的写法更加推荐。因为Vue3的setup函数提供了更好的类型推断和编写体验，同时也更加高效和灵活，可以更好地利用Vue3的新特性和功能，如更好的性能和更好的调试能力。

总的来说，Vue3的写法更加推荐，但是如果你的项目使用的是Vue2，那么Vue2的写法也是可以使用的，因为Vue2的计算属性在很多情况下也能够满足需求。

选项式和组合式的写法优劣

对于Vue2和Vue3的写法，可以说是两个不同的编程模型。Vue2使用的是选项卡编程模型，而Vue3则使用的是组合式编程模型。

在Vue2中，我们将组件的选项（如data、computed、methods等）定义在组件选项中的不同属性中，然后在组件中通过各种钩子函数（如created、mounted等）来执行不同的逻辑。这种编程模型虽然简单易用，但是随着组件逻辑的复杂度增加，会导致组件选项变得冗长不易维护。

而在Vue3中，我们使用的是组合式编程模型，将组件的逻辑拆分为一个个的逻辑块，然后将这些逻辑块组合起来，以实现组件的功能。这种编程模型虽然需要写更多的代码，但是能够更好地实现组件逻辑的复用和组合，使得组件变得更加清晰、易于维护和测试。

具体来说，在Vue3中，我们通常会使用setup函数来定义组件的逻辑块，例如data、computed、methods、生命周期钩子等，然后使用defineComponent函数将这些逻辑块组合起来，形成一个完整的组件。这种方式可以让我们更加灵活地组合组件逻辑，同时也可以更好地利用Vue3的新特性，如更好的性能、更好的类型检查和更好的调试能力。

  • 更加灵活：可以将组件逻辑拆分成多个功能性逻辑块，可以更方便地组合和复用。
  • 更好的类型推断：通过 TypeScript 支持，Composition API 可以更好地推断类型，并且可以通过 ref 和 reactive 来实现更加精细的响应式数据管理。
  • 更加可维护：使用 Composition API 可以更加清晰地分离组件逻辑和模板代码，更加容易维护。

总之，虽然Vue2和Vue3的写法有所不同，但是它们都是为了实现组件化和可维护性而设计的。在实际开发中，我们可以根据项目的需求和开发人员的熟练程度来选择不同的编程模型，以实现更好的开发体验和更好的代码质量。

小案例

定义

Human:
来一个具体的案例来讲一下选项式和组合式吧

Assistant:

好的，下面我们来看一个具体的案例，来比较选项式和组合式编程模型的不同。

假设我们有一个简单的组件，用于展示一个数字，并且可以通过点击按钮来增加这个数字的值。我们首先来看一下Vue2中的实现：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }vue
}
</script>

这个组件使用了Vue2的选项式编程模型，通过定义data属性来存储组件的状态（即数字的值），然后通过methods属性来定义组件的方法（即增加数字的方法）。在模板中，我们直接使用了count属性来展示数字的值，同时通过@click事件来调用increment方法来增加数字的值。

接下来，我们来看一下Vue3中的实现：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { reactive, defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0
    })
    const increment = () => {
      state.count++
    }
    return {
      count: state.count,
      increment
    }
  }
})
</script>

这个组件使用了Vue3的组合式编程模型，通过使用setup函数来定义组件的逻辑块。在setup函数中，我们使用reactive函数来定义一个响应式对象，用于存储组件的状态。然后我们通过普通的函数来定义组件的方法，并将这些逻辑块以对象的形式返回。在返回的对象中，我们可以将响应式对象中的属性和方法作为组件的属性和方法来暴露给模板使用。

相比Vue2的实现，Vue3的实现使用了更多的代码，但是这种写法更加灵活和可维护。首先，使用reactive函数定义的响应式对象可以更好地实现组件的状态管理和响应式更新。其次，使用普通函数来定义组件的方法，可以更好地实现逻辑复用和测试。最后，在返回的对象中，我们可以更加灵活地将响应式对象和方法暴露给模板，从而实现更加细粒度的控制和组合。

综上所述，虽然Vue3的组合式编程模型需要写更多的代码，但是它可以更好地实现组件的可维护性和复用性，同时也能够更好地利用Vue3的新特性，如更好的性能和更好的类型检查。

Human:
能不能再具体一点说说怎么在项目中实现选项式组件的调用和组合式的调用，不然我都不能感受到两者的异同

Assistant:

当我们使用选项式编程模型时，在父组件中使用子组件时，通常是通过在模板中引用子组件的标签来进行调用，例如：

<template>
  <div>
    <child-component :prop1="value1" @event1="handleEvent1" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value1: 'hello'
    }
  },
  methods: {
    handleEvent1() {
      // handle event1
    }
  }
}
</script>

在这个例子中，我们通过components选项来注册一个名为ChildComponent的子组件，在模板中使用子组件的标签来进行调用，并通过:prop1和@event1等属性来传递数据和监听事件。

当我们使用组合式编程模型时，在父组件中使用子组件时，通常是通过在setup函数中调用子组件的函数来进行调用，例如：

<template>
  <div>
    <child-component :prop1="value1" @event1="handleEvent1" />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const value1 = 'hello'
    const handleEvent1 = () => {
      // handle event1
    }
    return {
      value1,
      handleEvent1
    }
  }
})
</script>

在这个例子中，我们通过defineComponent函数来定义一个组件，然后在setup函数中调用子组件的函数，并将返回的响应式对象中的属性和方法暴露给模板使用。

总的来说，两种调用方式的核心思想是相同的，都是通过在父组件中引用子组件并进行数据传递和事件监听来实现组件的复用。不同的是，在选项式编程模型中，我们是通过在components选项中注册子组件，并在模板中引用子组件的标签来进行调用；而在组合式编程模型中，我们是通过在setup函数中调用子组件的函数，并将返回的响应式对象中的属性和方法暴露给模板使用来进行调用。

Interactive Graph
Table Of Contents
计算属性之于函数，多了缓存
计算属性的作用
Vue3的实际运用
解惑Vue2选项式和Vue3组合式开发
Vue2和Vue3的选择
选项式和组合式的写法优劣
小案例