手记

Vue3入门详解：新手必看的简单教程

互换的青春
2024-12-24 12:34:08浏览 126
概述

本文全面介绍了Vue3的基础知识和使用方法，包括环境搭建、基本语法、组件创建和使用、路由与状态管理等。通过本文，你可以轻松掌握Vue3的核心概念和技术细节，快速上手开发Vue3项目。文中还提供了实践项目和常见问题解决方法，帮助你更好地理解和应用Vue3。

Vue3简介与环境搭建

什么是Vue3

Vue.js 是一个用于构建用户界面的渐进式框架。与Angular和React有所不同，Vue更加轻量和灵活，易于学习和使用。Vue3是Vue.js的最新版本，发布于2020年9月，带来了许多性能优化和新特性，如更快速的DOM渲染、更好的TypeScript支持、Composition API等。

安装Node.js和Vue CLI

在开始使用Vue3之前，需要先安装Node.js和Vue CLI。

  1. 访问Node.js官网（https://nodejs.org/），下载并安装最新版本的Node.js。
  2. 安装Vue CLI： 
    npm install -g @vue/cli
  3. 验证Vue CLI安装成功： 
    vue --version

创建第一个Vue3项目

使用Vue CLI创建一个新项目：

vue create my-vue3-app

选择Vue 3.x版本，选择默认配置或自定义配置。进入项目目录：

cd my-vue3-app

启动开发服务器：

npm run serve

此时，可以在浏览器中访问 http://localhost:8080 查看项目。

Vue3基本语法

模板语法

Vue3的模板语法使用HTML和特定的语法来控制页面渲染。基础的模板语法包括插值、指令、条件渲染、循环等。

  1. 插值
    使用{{ }}语法在HTML元素中插入数据。

    <template>
 <div>
   <p>{{ message }}</p>
 </div>
</template>
<script>
export default {
 data() {
   return {
     message: 'Hello, Vue3!'
   }
 }
}
</script>
  2. 指令
    Vue3提供了一些内置指令，如v-if、v-for等。 
    <template>
 <div>
   <ul>
     <li v-for="item in items" :key="item">{{ item }}</li>
   </ul>
 </div>
</template>
<script>
export default {
 data() {
   return {
     items: ['Vue', 'React', 'Angular']
   }
 }
}
</script>

计算属性与方法

  1. 计算属性
    计算属性用于处理依赖关系的数据计算，会根据依赖的数据变化自动更新。

    <template>
 <div>
   <p>Full name: {{ fullName }}</p>
 </div>
</template>
<script>
export default {
 data() {
   return {
     firstName: 'John',
     lastName: 'Doe'
   }
 },
 computed: {
   fullName() {
     return this.firstName + ' ' + this.lastName
   }
 }
}
</script>
  2. 方法
    方法是普通的JavaScript函数，用于处理复杂的逻辑和修改数据。 
    <template>
 <div>
   <button @click="greet">Say Hello</button>
 </div>
</template>
<script>
export default {
 methods: {
   greet() {
     alert('Hello!')
   }
 }
}
</script>

指令

Vue3提供了一些内置指令，如v-if、v-for、v-bind等。

  1. v-if
    用于条件判断，只在条件为真时渲染元素。

    <template>
 <div>
   <p v-if="isLoggedIn">Logged in</p>
 </div>
</template>
<script>
export default {
 data() {
   return {
     isLoggedIn: true
   }
 }
}
</script>
  2. v-for
    用于循环渲染列表。 
    <template>
 <div>
   <ul>
     <li v-for="item in items" :key="item">{{ item }}</li>
   </ul>
 </div>
</template>
<script>
export default {
 data() {
   return {
     items: ['Vue', 'React', 'Angular']
   }
 }
}
</script>

组件基础

创建组件

组件是Vue3中复用和组织代码的重要方式。创建组件可以使用单文件组件（SFC）或JSX。

  1. 单文件组件

    <template>
 <div>
   <p>{{ message }}</p>
 </div>
</template>
<script>
export default {
 name: 'MyComponent',
 data() {
   return {
     message: 'Hello from MyComponent'
   }
 }
}
</script>
<style scoped>
p {
 color: red;
}
</style>

  2. JSX风格组件

    import { defineComponent } from 'vue'

export default defineComponent({
 name: 'MyComponent',
 setup() {
   return {
     message: 'Hello from MyComponent'
   }
 }
})

使用组件

在父组件中使用子组件，需要先导入子组件。

  1. 导入组件

    import MyComponent from './MyComponent.vue'

  2. 注册组件

    export default {
 components: {
   MyComponent
 }
}
  3. 使用组件 
    <template>
 <div>
   <MyComponent />
 </div>
</template>

传递属性和事件

  1. 传递属性

    <MyComponent msg="Hello from Parent" />
    props: ['msg']
  2. 传递事件 
    <MyComponent @click="handleClick" />
    emits: ['click']

响应式原理

数据绑定

Vue3使用Proxy对象实现数据的响应式，通过Proxy对象包装原始数据对象，当这个对象的属性发生变化时，Vue会触发相应的更新。

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

state.count++  // 触发更新

响应式系统

Vue3的响应式系统主要是通过Proxy和Reflect API实现的，通过Proxy来拦截对象的属性访问和修改，从而实现数据的变化跟踪。

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

const handler = {
  get(target, key) {
    // 拦截get操作
    return target[key]
  },
  set(target, key, value) {
    // 拦截set操作
    target[key] = value
  }
}

const proxy = new Proxy(state, handler)

侦听器

Vue3提供了watch和watchEffect两种侦听器。

  1. watch
    跟踪依赖关系，并在数据变化时执行回调函数。

    import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
 console.log(`count changed from ${oldVal} to ${newVal}`)
})

  2. watchEffect
    每次依赖的数据变化时，执行回调函数。

    import { ref, watchEffect } from 'vue'

const count = ref(0)
const doubleCount = ref(0)

watchEffect(() => {
 doubleCount.value = count.value * 2
})

路由与状态管理

Vue Router简介

Vue Router是Vue.js官方的路由器，用于实现应用的前端路由功能。

  1. 安装Vue Router

    npm install vue-router@next

  2. 使用Vue Router

    import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
 { path: '/', component: Home },
 { path: '/about', component: About }
]

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

export default router

Vuex基础

Vuex是Vue.js官方的状态管理库，用于集中管理应用的状态。

  1. 安装Vuex

    npm install vuex@next

  2. 使用Vuex

    import { createStore } from 'vuex'

export default createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++
   }
 },
 actions: {
   increment({ commit }) {
     commit('increment')
   }
 },
 getters: {
   doubleCount(state) {
     return state.count * 2
   }
 }
})

实践项目

小项目实战

创建一个简单的待办事项应用。

  1. 创建项目

    vue create todo-app

  2. 安装依赖

    npm install vue-router vuex

  3. 创建组件

    // TodoList.vue
<template>
 <div>
   <ul v-for="todo in todos" :key="todo.id">
     <li>{{ todo.text }}</li>
   </ul>
 </div>
</template>

<script>
import { ref, defineComponent } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default defineComponent({
 setup() {
   const store = useStore()
   const router = useRouter()
   const todos = ref(store.state.todos)

   const removeTodo = (id) => {
     store.dispatch('removeTodo', id)
   }

   return {
     todos,
     removeTodo
   }
 }
})
</script>

  4. 路由配置

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

const routes = [
 { path: '/', component: TodoList }
]

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

export default router

  5. Vuex配置

    // store/index.js
import { createStore } from 'vuex'

export default createStore({
 state: {
   todos: [
     { id: 1, text: 'Learn Vue3' },
     { id: 2, text: 'Learn Vuex' }
   ]
 },
 mutations: {
   addTodo(state, todo) {
     state.todos.push(todo)
   },
   removeTodo(state, id) {
     state.todos = state.todos.filter(todo => todo.id !== id)
   }
 },
 actions: {
   addTodo({ commit }, todo) {
     commit('addTodo', todo)
   },
   removeTodo({ commit }, id) {
     commit('removeTodo', id)
   }
 }
})
  6. 运行项目 
    npm run serve

常见问题与解决方法

  1. 问题：组件间通信困难。
    解决方法：使用provide和inject，或者使用Vuex统一管理状态。

    // ParentComponent.vue
import { provide } from 'vue'

export default {
 setup() {
   const name = 'John'
   provide('parentName', name)
 }
}

// ChildComponent.vue
import { inject } from 'vue'

export default {
 setup() {
   const parentName = inject('parentName')
   console.log(parentName) // 输出：John
 }
}

  2. 问题：组件复用困难。
    解决方法：将重复使用的代码提取成单独的组件，并在需要的地方引用。

    // Button.vue
<template>
 <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
 props: {
   text: String
 },
 methods: {
   handleClick() {
     console.log('Button clicked')
   }
 }
}
</script>
  3. 问题：路由切换慢。
    解决方法：优化路由配置，使用路由懒加载。 
    // router/index.js
const routes = [
 { path: '/', component: () => import('@/views/Home.vue') },
 { path: '/about', component: () => import('@/views/About.vue') }
]
相关标签
Vue.js
0人推荐
随时随地看视频
慕课网APP