reactive和ref的区别和案例

以下是reactive和ref的区别和案例：

1. 区别：
- ref用于创建一个响应式的单一数据，而reactive用于创建一个响应式的对象，可以包含多个属性。
- ref返回的是一个对象，而reactive返回的是一个Proxy对象，可以对其进行解构和扩展。

2. 案例：
- ref案例：

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 输出：0

count.value++; // 触发视图更新

- reactive案例：

import { reactive } from 'vue';

const person = reactive({
  name: 'John',
  age: 30,
});

console.log(person.name); // 输出：John

person.age++; // 触发视图更新

相关问题

vue3 组合式函数 案例

### Vue3 Composition API 使用示例

#### 创建一个简单的计数器应用

为了更好地理解 Vue 3 中的 Composition API，这里提供了一个简单而完整的计数器应用程序实例。

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'CounterApp',
  setup() {
    // 定义可变状态变量 count
    const count = ref(0);

    // 提供增加和减少的方法
    function increment() {
      count.value++;
    }

    function decrement() {
      if (count.value > 0) {
        count.value--;
      }
    }

    // 返回模板所需的数据和方法
    return {
      count,
      increment,
      decrement
    };
  },
  template: `
    <div>
      <p>当前计数值：{{ count }}</p>
      <button @click="increment">+</button>
      <button @click="decrement" :disabled="count === 0">-</button>
    </div>`
});

此代码片段展示了如何利用 `ref` 函数创建响应式的属性，并通过返回的对象暴露给组件模板使用[^1]。

#### 组合多个自定义 Hooks 实现复杂功能

对于更复杂的场景，可以组合不同的 hooks 来构建逻辑单元。例如，在处理表单验证时：

// useValidation.js 文件内容如下：
import { computed, reactive } from 'vue';

function useValidation(initialValue, validatorFn) {
  const state = reactive({
    value: initialValue,
    error: ''
  });

  const validate = () => {
    const result = validatorFn(state.value);
    state.error = result ? '' : 'Invalid input';
  };

  return {
    ...toRefs(state),
    bind: {
      value: computed(() => state.value),
      onChange: e => {
        state.value = e.target.value;
        validate();
      }
    }
  };
}

export default useValidation;

// 在组件内部调用该 hook 并将其绑定到输入框上
setup() {
  import useValidation from './useValidation';

  const emailValidator = val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
  
  const emailField = useValidation('', emailValidator);

  return {
    emailField
  };
}

这段代码说明了怎样封装特定业务逻辑成独立的小型 Hook，并能在不同地方重复利用这些工具函数[^3]。

vue3常用方法及案例

Vue3是Vue.js的最新版本，它具有更加简洁、高效的API和更好的性能。下面是Vue3常用方法及案例：

1. 响应式数据

在Vue3中，使用`ref`和`reactive`来创建响应式数据。

import { ref, reactive } from 'vue'

// ref
const count = ref(0)

// reactive
const state = reactive({
  name: 'Vue',
  version: '3.0',
  features: ['Composition API', 'Teleport', 'Suspense'],
})

2. 组件

Vue3中，组件的定义方式有所变化，使用`defineComponent`来定义组件。

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  setup(props) {
    return {
      greeting: `Hello, ${props.msg}!`,
    }
  },
  template: '<h1>{{ greeting }}</h1>',
})

3. 生命周期

Vue3中，生命周期的名称和使用方式都有所变化。

import { onBeforeMount, onMounted } from 'vue'

export default {
  // Vue2
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },

  // Vue3
  setup() {
    onBeforeMount(() => {
      console.log('beforeMount')
    })
    onMounted(() => {
      console.log('mounted')
    })
  },
}

4. 组合式API

Vue3中，引入了组合式API，可以更好地组织和重用逻辑。

import { ref, computed, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)

    watchEffect(() => {
      console.log(`count: ${count.value}, doubled: ${doubled.value}`)
    })

    return {
      count,
      doubled,
    }
  },
}

5. Teleport

Vue3中，新增了Teleport组件，可以将子组件的内容渲染到父组件之外的DOM节点中。

<template>
  <div>
    <h1>Welcome to my app!</h1>
    <teleport to="body">
      <Modal :show="showModal" @close="showModal = false" />
    </teleport>
    <button @click="showModal = true">Show Modal</button>
  </div>
</template>

6. Suspense

Vue3中，新增了Suspense组件，可以优雅地处理异步组件和动态组件的加载状态。

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <Loading />
      </template>
    </Suspense>
  </div>
</template>

以上是Vue3常用方法及案例，希望对您有所帮助。