Vue3基础知识剖析

在本文中，我们将讲解Vue3的基础概念和主要特性，包括常用的指令、组件和钩子函数，以及Vue3的响应式系统和组合式API。同时我们也将介绍一些趣味性的示例来帮助理解和运用这些概念。

指令

在Vue3中，指令是Vue模板语法中最常用的一种标记，用于绑定表达式或动态值到DOM元素上，从而实现交互和动态更新。常见的指令有v-bind、v-for、v-if、v-on和v-model等。其中v-bind用于将一个表达式赋值到指定属性上，例如：

<!-- 绑定数据到属性 -->
<img v-bind:src="imageSrc">

<!-- 简写版本 -->
<img :src="imageSrc">

v-for用于遍历数组或对象并生成列表元素。例如：

<ul>
  <li v-for="(item, index) in items">{{ index }}. {{ item }}</li>
</ul>

v-if用于根据条件判断控制DOM元素的显示和隐藏。例如：

<div v-if="isVisible">This element only appears when isVisible is true.</div>

v-on用于监听指定的事件并执行Vue实例中对应的方法。例如：

<button v-on:click="incrementCount">Click Me</button>

v-model用于将表单元素和Vue实例的数据属性进行双向绑定。例如：

<input v-model="message" type="text">

组件

在Vue3中，组件是将UI界面进行拆分和组合的基本单位。组件可以包含一组已封装好的模板、样式和行为，可以在父组件中通过标签的方式进行引入和使用。组件通常用于将UI进行分割和重用，让代码更易于理解和维护。在Vue3中，组件的定义方式和Vue2不完全一样，可以采用 defineComponent 函数封装组件：

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

export default defineComponent({
  name: 'HelloWorld',
  props: {
    message: String,
  },
  setup(props) {
    return {
      greeting: 'Hello',
    }
  }
})
</script>

<template>
  <div>
    {{greeting}}, {{message}}
  </div>
</template>

<style>
  /* 组件的样式 */
</style>

在上面的示例中，我们使用了新的 setup 函数来配置组件的行为，它类似于 Vue2 中的 created 或 mounted 钩子函数。可以使用 props 参数获取父组件传递的属性，同时也可以通过 return 语句将需要在模板中使用的值进行返回。

钩子函数

在Vue中，钩子函数是Vue实例在生命周期中触发的一些特定事件。常见的钩子函数有 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 等。这些钩子函数分别对应着Vue实例在不同的生命周期阶段时进行的回调操作，如初始化数据、实例化组件、挂载DOM、更新数据、销毁实例等。

<script>
  export default {
    beforeCreate() {
      console.log('beforeCreate hook');
    },
    created() {
      console.log('created hook');
    },
    beforeMount() {
      console.log('beforeMount hook');
    },
    mounted() {
      console.log('mounted hook');
    },
    beforeUpdate() {
      console.log('beforeUpdate hook');
    },
    updated() {
      console.log('updated hook');
    },
    beforeDestroy() {
      console.log('beforeDestroy hook');
    },
    destroyed() {
      console.log('destroyed hook');
    },
  }
</script>

响应式系统

Vue3的响应式系统是基于ES6的Proxy实现的，相比Vue2的Object.defineProperty，性能更高、能力更强。响应式系统的核心概念是“依赖收集”和“派发更新”。当一个响应式数据被引用时，Vue会自动收集当前的渲染副作用函数作为该数据的“读取依赖”，然后当这个数据发生变化时，会自动触发相关的“更新依赖”执行。这样一来，我们就可以非常方便地实现数据和UI的自动同步，而不需要手动绑定和管理实现。

下面是一个简单的例子，演示了如何使用Vue3的响应式系统：

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

  export default {
    setup() {
      const count = ref(0);

      watchEffect(() => {
        console.log(`Count is ${count.value}`);
      });

      return {
        count,
        incrementCount() {
          count.value++;
        },
      };
    },
  };
</script>

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="incrementCount">+</button>
  </div>
</template>

在这个示例中，我们使用了 ref 函数来创建一个响应式计数器，然后使用 watchEffect 监听该计数器的变化并输出到控制台中。在 setup 函数中，我们使用 return 将需要传递给模板的数据和方法进行了暴露，可以在模板中使用它们进行交互。

组合式API

Vue3的组合式API是一组新特性，旨在使组件更易于理解、维护和重用。组合式API有多个函数构成，包括 reactive、computed、watch、watchEffect、ref 和 toRef 等。通过这些函数，我们可以更加灵活地组合和拆分行为逻辑，将相关代码聚合在一起，从而让代码更加清晰和易于管理。

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

  export default {
    setup() {
      const state = reactive({
        message: 'Hello World',
        count: 0,
      });

      const doubleCount = computed(() => {
        return state.count * 2;
      });

      watchEffect(() => {
        console.log(`Message is ${state.message}, count is ${state.count}`);
      });

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

<template>
  <div>
    <input v-model="state.message">
    <div>Count: {{ state.count }} Double: {{ doubleCount }}</div>
  </div>
</template>

<style>
  /* 样式 */
</style>

在这个示例中，我们使用了组合式API的 reactive 函数来创建了一个响应式的 state 对象，其中包含了两个属性：message 和 count。我们还使用了 computed 函数来实现了一个名为doubleCount的计算属性。最后，我们使用了 watchEffect 函数来监听对 state 对象的变更并输出日志。在 setup 函数中，我们可以使用 return 将需要传递给模板的数据和方法进行了暴露。

示例1：实现一个简单的计时器

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

  export default {
    setup() {
      const count = ref(0);

      setInterval(() => {
        count.value++;
      }, 1000);

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

<template>
  <div>
    <span>{{ count }}</span>
  </div>
</template>

在这个示例中，我们使用了组合式API中的 ref 函数创建了一个初始值为0的计数器。然后使用 setInterval 函数每秒钟自增当前计数器的值。最后通过 return 将计数器的值暴露给模板使用。

示例2：实现一个todo列表

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

  export default {
    setup() {
      const todoList = ref([]);
      const todoInput = ref('');

      function addTodo() {
        todoList.value.push(todoInput.value);
        todoInput.value = '';
      }

      function removeTodo(index) {
        todoList.value.splice(index, 1);
      }

      return {
        todoList,
        todoInput,
        addTodo,
        removeTodo,
      };
    },
  };
</script>

<template>
  <div>
    <input type="text" v-model="todoInput" />
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="(todo, index) in todoList" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

在这个示例中，我们使用了ref函数分别创建了一个“todoList”数组和一个“todoInput”字符串，并实现了一个“addTodo”方法用于将输入的“todoInput”添加到“todoList”中。同样，我们还实现了一个“removeTodo”方法用于移除指定索引下的“todo”。最后，我们将这些数据和方法通过 return 暴露给模板使用。

这两个示例展示了Vue3的基础知识和主要特性，其中包括指令、组件、钩子函数、响应式系统和组合式API等内容，我们可以根据具体的场景运用这些知识，来构建出更加复杂和功能强大的应用程序。