Vue3核心功能响应式变量项目实战入门教程

本文详细介绍了Vue3的核心功能响应式变量的原理和使用方法，包括ref和reactive的区别与应用场景，并通过项目实战演示了如何在实际开发中运用这些功能。此外，文章还提供了性能优化技巧和调试方法，帮助开发者更好地理解和使用Vue3的响应式系统。

Vue3的响应式系统的核心是基于ES6的Proxy对象实现的。通过Proxy对象，Vue3能够更高效地追踪到数据的变化，并在数据变化时自动更新视图。相比Vue2，Vue3的响应式系统不仅在性能上有了显著的提升，还解决了Vue2中的一些痛点，如不能监听到对象的新增属性等。

响应式系统在Vue3中主要依赖于两个全局API：ref 和 reactive。这两个API分别用于定义基本类型的响应式变量和复杂类型的响应式对象。

Ref

ref 是用于定义基本类型（如number、string等）的响应式变量。它包装了一个原始值，并返回一个可读写的引用。ref 对象的 .value 属性保存着原始值。

import { ref } from 'vue';

const count = ref(0);
console.log(count.value);  // 输出0
count.value++;
console.log(count.value);  // 输出1

reactive

reactive 是用来定义复杂类型的响应式对象。它将一个普通对象转换为一个响应式的代理对象。通过代理对象访问和修改原始对象中的属性，将会触发相应的更新操作。

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

console.log(state.count);  // 输出0
state.count++;
console.log(state.count);  // 输出1

使用场景

• ref 一般用于定义基本类型的响应式变量，如数值、字符串等。
• reactive 用于定义复杂类型的响应式对象，如对象或数组等。

深响应

深响应是指代理对象内部的所有层级属性都是响应式的。如果对象内部包含对象，代理会递归地将其也变为响应式。

import { reactive } from 'vue';

const deepObj = reactive({
  a: {
    b: {
      c: 1
    }
  }
});

console.log(deepObj.a.b.c);  // 输出1
deepObj.a.b.c++;
console.log(deepObj.a.b.c);  // 输出2

浅响应

浅响应仅代理对象的第一层属性，对于对象内部的对象不会进行递归代理。

import { reactive } from 'vue';

const shallowObj = reactive({
  a: {
    b: 1
  }
});

console.log(shallowObj.a);  // 输出 { b: 1 }
shallowObj.a = { b: 2 };
console.log(shallowObj.a);  // 输出 { b: 2 }

应用场景

• 深响应：适用于需要追踪嵌套对象的复杂结构。
• 浅响应：适用于需要手动控制响应式深度的情况，或者不需要追踪嵌套属性变化的情况。

ref 可以用来定义基本类型的响应式变量。它返回的对象具有一些特殊的方法和属性，如 .value 属性用于访问和修改变量值。

<script>
import { ref, computed } from 'vue';

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

    return { count, doubleCount };
  }
};
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">Increment</button>
    <p>{{ doubleCount }}</p>
  </div>
</template>

reactive 可以用来定义复杂类型的响应式对象。返回的对象是一个代理对象，能够追踪到对象内部属性的变化。

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    return { state };
  }
};
</template>

<template>
  <div>
    <p>{{ state.count }}</p>
    <button @click="state.count++">Increment</button>
  </div>
</template>

computed属性

computed 属性用于定义基于其他响应式变量的计算属性。计算属性会缓存计算结果，只有当依赖的响应式变量发生变化时，计算属性才会重新计算。

<script>
import { ref, computed } from 'vue';

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

    return { count, doubleCount };
  }
};
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">Increment</button>
    <p>{{ doubleCount }}</p>
  </div>
</template>

watch监听器

watch 监听器用于监听响应式变量的变化，并在响应式变量变化时执行指定的回调函数。

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return { count };
  }
};
</template>

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

首先，你需要安装Vue3并初始化一个新的Vue3项目。这里使用Vue CLI来创建项目。

npm install -g @vue/cli
vue create my-vue3-app --preset @vue/cli-plugin-vue3
cd my-vue3-app
npm run serve

然后，根据项目需求添加需要的依赖包，例如vue-router用于路由管理。

npm install vue-router

在Vue3中设置路由，首先需要在项目中配置路由。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

接着，创建对应的组件文件。

<!-- views/HomeView.vue -->
<template>
  <div class="home">
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'HomeView'
};
</script>

<style scoped>
.home {
  text-align: center;
}
</style>

<!-- views/AboutView.vue -->
<template>
  <div class="about">
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'AboutView'
};
</script>

<style scoped>
.about {
  text-align: center;
}
</style>

最后，在主应用文件中使用路由。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

可以通过在路由配置中设置动态参数来传递数据，并在组件中通过props接收参数。

// router/index.js
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about/:id',
    name: 'about',
    component: AboutView,
    props: true
  }
];

<!-- views/AboutView.vue -->
<template>
  <div class="about">
    <h1>About Page</h1>
    <p>User ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  name: 'AboutView',
  props: ['id']
};
</script>

在组件中使用$route.params来获取动态参数。

<!-- views/HomeView.vue -->
<template>
  <div class="home">
    <h1>Home Page</h1>
    <button @click="goToAboutPage">Go to About Page</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods: {
    goToAboutPage() {
      this.$router.push({ name: 'about', params: { id: '123' } });
    }
  }
};
</script>

双向绑定是将视图和模型的数据绑定在一起，实现数据的双向流动。在Vue3中，可以使用v-model指令来实现基本的双向绑定。

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('');
    return { message };
  }
};
</script>

对于对象属性的双向绑定，可以使用v-model结合ref实现。

<template>
  <div>
    <input v-model="user.name" />
    <p>{{ user.name }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: ''
    });
    return { user };
  }
};
</script>

计算属性在依赖的响应式变量变化时才会重新计算，避免了不必要的计算。

<template>
  <div>
    <button @click="incrementCounter">Increment</button>
    <p>{{ doubleCounter }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const counter = ref(0);
    const doubleCounter = computed(() => counter.value * 2);

    const incrementCounter = () => {
      counter.value++;
    };

    return { counter, doubleCounter, incrementCounter };
  }
};
</script>

watch可以监听响应式变量的变化，并在变化时执行回调函数。

<template>
  <div>
    <input v-model="searchText" />
    <p v-if="searchResults.length">Found results:</p>
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const searchText = ref('');
    const searchResults = ref([]);

    watch(searchText, async (newVal) => {
      if (newVal) {
        const response = await fetch(`https://api.example.com/search?q=${newVal}`);
        const data = await response.json();
        searchResults.value = data;
      } else {
        searchResults.value = [];
      }
    });

    return { searchText, searchResults };
  }
};
</script>

1. 手动修改原始对象：直接修改原始对象，而没有通过代理对象访问，有可能导致响应式失效。

   const state = reactive({
    count: 0
   });
   
   state.count++;  // 正确的修改方式
   Object.assign(state, { count: 1 });  // 错误的修改方式

2. 访问非响应式属性：访问没有被代理的对象或属性，将会导致这些属性失去响应式。

   const state = reactive({
    count: 0
   });
   
   const nonProxyCount = state.count;
   nonProxyCount++;  // count不会更新

3. 循环引用：循环引用会导致代理对象无法被正确销毁。

   const a = reactive({});
   a.b = a;  // 会导致循环引用

4. 非响应式对象：使用非响应式对象作为响应式对象的属性，会导致该属性失去响应式。

   const state = reactive({
    user: {}
   });
   
   state.user.name = 'John';  // name不会成为响应式属性

1. 避免不必要的计算：使用computed来缓存计算结果，避免重复计算。
2. 减少不必要的监听：只在必要时使用watch监听变量的变化。
3. 简化数据结构：减少嵌套层次，避免不必要的深响应。

4. 使用readonly：对于不需要修改的响应式对象，可以使用readonly来提高性能。

   import { reactive, readonly } from 'vue';
   
   const state = reactive({
    user: {
      name: 'John'
    }
   });
   const readonlyState = readonly(state);

使用Vue开发者工具可以帮助调试Vue应用。它可以在浏览器中查看应用的组件树、响应式数据、生命周期钩子等信息。

1. 安装Vue开发者工具：

   npm install -g @vue/cli-plugin-babel
   vue add devtools

2. 查看组件树：在浏览器开发者工具中打开Vue面板，可以看到组件树及其相关数据。

3. 使用console.log：在代码中添加console.log来输出关键变量的状态，帮助排查问题。

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const searchText = ref('');
    const searchResults = ref([]);

    watch(searchText, async (newVal) => {
      if (newVal) {
        const response = await fetch(`https://api.example.com/search?q=${newVal}`);
        const data = await response.json();
        searchResults.value = data;
      } else {
        searchResults.value = [];
      }
    });

    return { searchText, searchResults };
  }
};
</script>

Vue3的响应式系统是应用开发的核心部分。通过ref和reactive定义响应式变量和对象，利用computed和watch来优化计算属性和监听数据变化。通过实践项目，我们掌握了如何使用这些核心功能进行实际开发。

建议继续深入学习Vue3的新特性和最佳实践。可以通过慕课网（https://www.imooc.com/）等在线学习平台进行系统学习。此外，Vue3的官方文档也是非常好的参考资料，提供了详细的API和使用指南。

通过实践更多的项目，不断积累经验，提高开发技能。在开发过程中，可以多参考Vue3的官方示例和社区中的优秀项目，学习更多的开发技巧和优化方法。