Vue3中ref与reactive的区别及其使用方法

阅读量：

文章目录

前言
ref—计数器案例
reactive—计数器案例
区别
总结

前言

今天的分享会围绕Vue 3框架中的ref与reactive组件的运用展开，并非单纯的讲解技术细节。我们需要深入探讨的是它们之间的主要区别体现在哪里？让我们以一个简明易懂的计数功能演示为例来探讨它们的应用场景。

ref—计数器案例

ref 主要用于基本类型的响应，看如下代码：

复制代码

    import { ref } from 'vue' // 导入ref
    interface DataProps {
      count: number;
      double: number;
      increase: () => void
    }
    export default {
      name: 'App',
      setup() {
    const count = ref(0)
    const double = computed(() => {
      return count.value*2
    })
    const increase = () => {
      count.value++
    }
    
    return {

全部评论 (0)

还没有任何评论哟~