核心概念

在学习 Vue 3 的过程中，理解核心名词概念是至关重要的。这一部分将深入探讨 Vue 实例的生命周期、模板语法等基本概念。

3.1 实例与生命周期

3.1.1 Vue 实例的创建

• Vue 实例：Vue 的核心是 Vue 实例，每个 Vue 应用都是通过 new Vue() 创建的。
• 基本语法：

  const app = Vue.createApp({
    data() {
      return { 
        message: 'Hello Vue!'
      };
    }
  });
  app.mount('#app');
  

• 选项：
  • data：用于定义组件的响应式数据。
  • methods：定义可在模板中调用的方法。
  • computed：定义计算属性，基于响应式数据进行计算。

3.1.2 生命周期钩子

• 生命周期：Vue 实例从创建到销毁的过程，包含多个生命周期钩子。
• 常用生命周期钩子：
  • beforeCreate：实例刚被创建，数据观测和事件配置尚未开始。
  • created：实例已创建，数据观测和事件配置已完成。
  • beforeMount：在挂载之前调用，相关的 DOM 元素尚未被渲染。
  • mounted：挂载完成，DOM 元素已渲染，可以进行操作。
  • beforeUpdate：数据更新之前调用。
  • updated：数据更新后调用。
  • beforeUnmount：实例销毁之前调用。
  • unmounted：实例销毁后调用。

const app = Vue.createApp({
  data() {
    return { count: 0 };
  },
  mounted() {
    console.log('组件已挂载');
  },
  unmounted() {
    console.log('组件已销毁');
  }
});

3.2 模板语法

3.2.1 插值

• 插值：通过双大括号 {{ }} 在模板中插入数据。
• 示例：

  <div id="app">
    <p>{{ message }}</p>
  </div>
  

3.2.2 指令

• 指令：以 v- 开头的特殊属性，用于绑定数据或控制 DOM 行为。
• 常用指令：

  • v-bind：动态绑定属性。

    <img v-bind:src="imageSrc">
    

    也有简写方式，可以省略 v-bind:，直接使用 :。
    <img :src="imageSrc">

  • v-model：双向数据绑定，常用于表单元素。

    <input v-model="inputValue">
    

  • v-if：条件渲染，只有条件为真时才渲染元素。

    <p v-if="isVisible">可见的内容</p>
    

  • v-for：列表渲染，遍历数组或对象。

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    

  • v-on：监听DOM对象。

    <button v-on:click="handleClick">点击我</button>
    

    也有简写方式，直接使用 @来绑定。
    <button @click="handleClick">点击我</button>

3.3 响应式系统

• 响应式数据：Vue 3 使用 Proxy 实现响应式，数据变化时自动更新视图。
• 基本使用：

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

3.4 计算属性与侦听器

3.4.1 计算属性

• 定义：基于响应式数据计算得出的属性，具有缓存特性。
• 示例：

  computed: {
    doubledCount() {
      return this.count * 2;
    }
  }
  

3.4.2 侦听器

• 定义：用于观察响应式数据的变化，执行异步或开销较大的操作。
• 示例：

  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  }
  

3.5 错误处理与调试

• 错误处理：使用 errorCaptured 钩子捕获子组件的错误。
• 调试工具：使用 Vue Devtools 进行调试，查看组件树、状态和事件。

通过掌握这些核心概念，您将能够更好地理解 Vue 3 的工作原理，并为后续的组件开发、路由管理和状态管理打下坚实的基础。