Vue.js 3 环境搭建指南

见解分享

2024-01-06 03:06:21

Vue.js 3 学习之旅：深入技术与实践

序言

在充满活力的网络开发领域，Vue.js 3 以其出色的响应式系统和清晰的代码结构备受青睐。踏上学习 Vue.js 3 之旅，让我们探索其内在机制，提升您的开发技能。本文将带您领略这门技术的精髓，为您提供一个全面而实用的学习指南。

环境搭建

安装 Node.js：使用最新版本的 Node.js（推荐 16.x 及以上）。
安装 Vue CLI：运行 npm install -g @vue/cli。
创建新项目：vue create my-vue3-app。

基础 API 使用

setup

setup() {
  // 响应式数据
  const count = ref(0);

  // 计算属性
  const doubledCount = computed(() => count.value * 2);

  // 侦听器
  watch(count, (newVal, oldVal) => {
    // newVal 是最新的值，oldVal 是旧的值
  });
}

响应式 API

// 响应式数据
const reactiveData = reactive({
  name: 'John Doe'
});

// 修改响应式数据
reactiveData.name = 'Jane Doe';

计算属性

// 计算属性
const computedProperty = computed(() => {
  // 返回计算后的值
});

侦听器

// 侦听器
watch(() => {
  // 侦听的表达式
}, (newVal, oldVal) => {
  // newVal 是最新的值，oldVal 是旧的值
});

Vue 3 生命周期

创建阶段 ：beforeCreate、created
挂载阶段 ：beforeMount、mounted
更新阶段 ：beforeUpdate、updated
卸载阶段 ：beforeUnmount、unmounted

依赖注入

// provide() 方法
provide('myService', new MyService());

// inject() 方法
const myService = inject('myService');

模板 Refs

// 模板中使用 ref
<template>
  <button ref="myButton"></button>
</template>

// 访问 DOM 元素
const myButton = this.$refs.myButton;

响应式工具

reactive

const reactiveObject = reactive({
  name: 'John Doe'
});

ref

const refObject = ref('John Doe');

computed

const computedValue = computed(() => {
  // 计算后的值
});

watchEffect

watchEffect(() => {
  // 副作用，在依赖项改变时触发
});

watch

watch(() => {
  // 侦听的表达式
}, (newVal, oldVal) => {
  // newVal 是最新的值，oldVal 是旧的值
});

实例探究与代码示例

技术指南：实现一个动态 Todo 列表

// Todo.vue
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input type="checkbox" v-model="todo.completed">
      <span>{{ todo.title }}</span>
    </li>
  </ul>
</template>

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

export default {
  setup() {
    const todos = reactive([
      { id: 1, title: 'Learn Vue.js', completed: false },
      { id: 2, title: 'Build a Todo app', completed: true }
    ]);

    return {
      todos
    };
  }
};
</script>

实用示例：打造一个多语言网站

// i18n.js
import { createI18n } from 'vue-i18n';

export default createI18n({
  locale: 'en',
  messages: {
    en: {
      greeting: 'Hello, world!'
    },
    fr: {
      greeting: 'Bonjour, le monde !'
    }
  }
});

// App.vue
<template>
  <div>{{ $t('greeting') }}</div>
</template>

<script>
import { createApp } from 'vue';
import i18n from './i18n';

createApp({
  i18n
}).mount('#app');
</script>