首頁手記 Vue3核心功能響應式變量項目實戰入門教程

Vue3核心功能響應式變量項目實戰入門教程

標簽：

Vue.js

概述

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

Vue3响应式系统简介

响应式原理简述

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

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

Ref与 reactive的区别与使用场景

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定义响应式变量

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定义响应式对象

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属性与watch监听器

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>

项目实战案例

使用ref和reactive实现数据双向绑定

双向绑定是将视图和模型的数据绑定在一起，实现数据的双向流动。在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>

利用computed优化计算属性

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

<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监听数据变化并执行相应操作

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>

常见问题与优化

响应式系统中常见的陷阱

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

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

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

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

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

const nonProxyCount = state.count;
nonProxyCount++;  // count不会更新

循环引用：循环引用会导致代理对象无法被正确销毁。
```
const a = reactive({});
a.b = a;  // 会导致循环引用
```
非响应式对象：使用非响应式对象作为响应式对象的属性，会导致该属性失去响应式。
```
const state = reactive({
 user: {}
});

state.user.name = 'John';  // name不会成为响应式属性
```

性能优化技巧

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

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

import { reactive, readonly } from 'vue';

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

调试与错误排查

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

安装Vue开发者工具：

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

查看组件树：在浏览器开发者工具中打开Vue面板，可以看到组件树及其相关数据。
使用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的新特性和最佳实践。可以通过慕课网（http://www.xianlaiwan.cn/）等在线学习平台进行系统学习。此外，Vue3的官方文档也是非常好的参考资料，提供了详细的API和使用指南。

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

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

烙印99

手記
篇

粉絲

92

獲贊與收藏

448

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13196 249

Pandas 入門教程

25個小節 19564 369

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空