vue3 学习笔记07 -- 定义响应式数据

vue3 学习笔记07 – 定义响应式数据

定义响应式数据主要通过 Vue 3 提供的 reactive、ref 和 computed 这几个 API 来实现

• ref：

  用于定义基本类型的响应式数据,如数字、字符串、布尔值等。它返回一个包含响应式数据的对象，通过 .value 访问或修改数据

    import { ref } from 'vue';
  
    const count = ref(0);
    
    // 读取响应式数据
    console.log(count.value);
    
    // 更改响应式数据
    count.value++;
  

  • 在模板中，直接使用 count 而不需要使用 .value 来访问数据。
• reactive:

  用于定义一个对象，并使该对象内部所有属性变成响应式的。它返回一个响应式代理对象，可以通过直接访问和修改对象属性来触发视图更新

   import { reactive } from 'vue';
  
    const state = reactive({
      count: 0,
    });
    
    // 读取响应式数据
    console.log(state.count);
    
    // 更改响应式数据
    state.count++;
  

• computed – 具体查看vue3 computed的使用

  computed 用于创建一个计算属性，它会根据依赖的响应式数据动态计算返回一个新的值，当依赖数据变化时自动更新。

   import { ref, computed } from 'vue';
  
    // 定义一个 ref
    const count = ref(0);
  
    // 定义一个 computed 计算属性
    const doubleCount = computed(() => count.value * 2);
    const compCount = computed({
        get() {
            return count.value + 2;
        },
        set(val: number) {
            count.value = val - 2;
        },
    });
  

• 在组件中使用

<template>
  <div>{{ count }}</div>
  <div>{{ state.count }}</div>
</template>
 
<script lang="ts" setup>
import { ref,reactive } from 'vue';
const count = ref(0);
const state = reactive({ count: 0 });
</script>

在每个vue组件中，都去手动引入 ref 和 reactive ,我们可以通过插件来完成自动导入

• 安装插件

npm i unplugin-auto-import -D

• 在 vite.config.ts 中配置

import { defineConfig, loadEnv, UserConfig, ConfigEnv } from 'vite'
export default defineConfig(({ mode  }: ConfigEnv): UserConfig => {
    return {
        plugins: [vue()],
        AutoImport({
            imports: ['vue', '@vueuse/core'],
            eslintrc: {
                enabled: false,
                filepath: './.eslintrc-auto-import.json',
                globalsPropValue: true
            },
            resolvers: [],
            vueTemplate: true,
            dts: false // 配置文件生成位置(false:关闭自动生成)
            // dts: "src/types/auto-imports.d.ts",
        }),
    }
})

• tsconfig.json

"include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "src/types/**/*.d.ts",
    "mock/**/*.ts",
    "vite.config.ts"
],

• 在组件中使用 – 不需要引入

<template>
  <div>{{ count }}</div>
  <div>{{ state.count }}</div>
</template>
 
<script lang="ts" setup>
const count = ref(0);
const state = reactive({ count: 0 });
</script>