为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Vue3学习：从入门到实践的简单教程

Vue3学习：从入门到实践的简单教程

标签：
前端工具 Vue.js
概述

Vue3学习涵盖了从环境搭建到基础概念、组件化开发、响应式系统、路由管理、状态管理以及高级特性和实战部署的全面内容。本文详细介绍Vue3的新特性和开发流程，帮助开发者快速掌握Vue3的核心技能。从安装Node.js和Vue CLI开始，逐步引导读者创建并优化Vue3项目，确保每个步骤都清晰易懂。

Vue3简介与环境搭建

Vue3新特性概述

Vue.js是一个渐进式前端框架，它专注于构建用户界面，具有高效、可维护和可扩展的特点。Vue3是Vue.js的最新版本，带来了许多新特性和改进，包括更快的渲染速度、更强大的响应式系统、更灵活的组合式API。

  1. 更快的渲染速度：Vue3通过改进的虚拟DOM算法和树形摇动（Tree Shaking）技术，使得渲染速度比Vue2快40%。
  2. 更强大的响应式系统：Vue3使用Proxy代替Object.defineProperty来实现响应式，使响应式系统更加强大和灵活。
  3. 组合式API：Vue3引入了Composition API，允许更灵活和可重用的代码结构，解决了选项式API中组件逻辑难以复用的问题。
  4. 更小的体积：Vue3的核心库体积更小，压缩后只有20KB左右。
  5. 更好的TypeScript支持：Vue3与TypeScript的兼容性更好，提供了更好的类型推断和更丰富的类型支持。
  6. 更好的按需导入：Vue3通过Tree Shaking技术实现了按需导入，用户可以选择只导入需要的功能，减少应用体积。
  7. 更好的性能优化：Vue3在实现上做了大量优化，包括动态组件的优化、过渡动画的优化等。

开发环境搭建与工具选择

搭建Vue3开发环境需要一些基本的工具和环境设置，以下是基本步骤：

  1. 安装Node.js：Vue项目的运行环境需要Node.js，安装Node.js的最新稳定版本。可以通过官网下载安装包，也可以使用npm或yarn来安装。

    # 安装Node.js
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

    验证是否安装成功：

    node -v
npm -v

  2. 安装Vue CLI：Vue CLI是一个Vue项目管理工具，可以快速创建Vue项目。

    npm install -g @vue/cli

  3. 创建Vue项目：使用Vue CLI创建一个新的Vue项目。

    vue create my-vue3-project

  4. 选择Vue3版本：在创建项目时，可以指定想要使用的Vue版本。在Vue CLI的创建过程中，选择Vue3版本。

    vue create my-vue3-project --preset @vue/cli-config/vue3

  5. 开发服务器：安装完Vue CLI后，可以启动开发服务器，开始开发。

    npm run serve
  6. 构建与打包：使用npm run build命令构建项目，以准备生产部署。 
    npm run build

创建第一个Vue3项目

  1. 创建Vue项目

    vue create my-vue3-project

  2. 选择Vue版本
    在选择预设文件时，选择Vue3版本，或者在命令行中指定。

    vue create my-vue3-project --preset @vue/cli-config/vue3

  3. 进入项目目录

    cd my-vue3-project

  4. 启动开发服务器

    npm run serve
  5. 查看项目
    打开浏览器，访问http://localhost:8080，可以看到默认的Vue3项目主页。

基础的Vue3项目环境搭建完毕，接下来可以开始进行Vue3项目开发。

基础概念与组件化开发

组件与模板语法

Vue3中的组件是Vue项目的基础，每个Vue应用本质上是多个组件的组合。组件有其自身的模板、样式和逻辑。

  1. 定义组件
    组件可以通过Vue的createComponent方法来定义。

    import { defineComponent } from 'vue';

export default defineComponent({
 name: 'HelloWorld',
 // 组件的参数
 props: {
   msg: String
 },
 // 组件的模板
 template: `<h1>{{ msg }}</h1>`
});

  2. 使用组件
    在父组件中注册并使用子组件。

    <template>
 <div>
   <HelloWorld msg="Hello Vue 3.0!" />
 </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
 components: {
   HelloWorld
 }
};
</script>

  3. 模板语法
    Vue3使用单文件组件（.vue文件）来定义组件，其中包含HTML模板、JavaScript逻辑和CSS样式。

    <template>
 <div>
   {{ message }}
   <button @click="increment">Increment</button>
 </div>
</template>

<script>
export default {
 data() {
   return {
     message: 'Hello Vue',
     count: 0
   };
 },
 methods: {
   increment() {
     this.count++;
   }
 }
};
</script>

<style scoped>
button {
 color: green;
}
</style>

数据绑定与指令

在Vue中，数据绑定是通过插值表达式{{ }}实现的，而指令（如v-if、v-for、v-model等）用于绑定HTML元素的行为。

  1. 插值表达式

    <template>
 <div>
   <p>{{ message }}</p>
 </div>
</template>

<script>
export default {
 data() {
   return {
     message: 'Hello Vue'
   };
 }
};
</script>

  2. v-if、v-else-if、v-else

    <template>
 <div>
   <p v-if="type === 'A'">Type A</p>
   <p v-else-if="type === 'B'">Type B</p>
   <p v-else>Other</p>
 </div>
</template>

<script>
export default {
 data() {
   return {
     type: 'B'
   };
 }
};
</script>

  3. v-for

    <template>
 <div>
   <ul>
     <li v-for="item in items">{{ item }}</li>
   </ul>
 </div>
</template>

<script>
export default {
 data() {
   return {
     items: ['Item 1', 'Item 2', 'Item 3']
   };
 }
};
</script>

  4. v-model

    <template>
 <div>
   <input v-model="message" />
   <p>{{ message }}</p>
 </div>
</template>

<script>
export default {
 data() {
   return {
     message: ''
   };
 }
};
</script>

事件处理与表单绑定

在Vue中，事件处理和表单绑定是两个非常重要的功能，它们可以用来实现交互性和表单数据的管理。

  1. 事件处理

    <template>
 <div>
   <button @click="handleClick">Click Me</button>
 </div>
</template>

<script>
export default {
 methods: {
   handleClick() {
     console.log('Button clicked');
   }
 }
};
</script>

  2. 表单绑定

    <template>
 <div>
   <input type="text" v-model="username" />
   <p>{{ username }}</p>
 </div>
</template>

<script>
export default {
 data() {
   return {
     username: ''
   };
 }
};
</script>

Vue3中的响应式系统

响应式原理简介

Vue3通过Proxy实现响应式系统，Proxy允许直接修改对象的属性，从而实现数据的变化能够自动更新视图。

  1. 核心优势：Proxy提供了更强大的拦截功能，可以拦截所有属性访问和修改，而不仅仅是属性的读取和写入。

  2. 实现原理：Vue3使用Proxy对象来拦截对象的属性访问，当属性值发生变化时，Proxy会触发相应的更新逻辑。

  3. 性能优化：通过使用Proxy，Vue3可以更高效地追踪响应式对象的变化，减少不必要的计算和渲染。

使用ref与reactive管理状态

Vue3提供了两种主要的状态管理方式：ref和reactive。这两种方式都可以管理响应式状态，但它们有各自的适用场景。

  1. ref
    ref用于包裹原始值（如数字、字符串），并将其转化为响应式对象。

    import { ref } from 'vue';

const count = ref(0);

function increment() {
 count.value++;
}

  2. reactive
    reactive用于将整个对象变为响应式，适用于复杂的数据结构。

    import { reactive } from 'vue';

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

function increment() {
 state.count++;
}

响应式最佳实践

  1. 避免直接修改ref或reactive对象
    直接修改ref或reactive对象可能导致更新失效。

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

function increment() {
 // 错误的写法
 state.count = 1;

 // 正确的写法
 state.count++;
}

  2. 正确的响应式更新
    使用计算属性或方法来更新响应式状态。

    import { computed } from 'vue';

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

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

  3. 避免不必要的重新计算
    使用computed时，确保依赖关系只在必要时重新计算。

    import { computed, ref } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

function increment() {
 count.value++;
}

路由管理与状态管理

Vue Router基础使用

Vue Router是Vue.js的官方路由库，用于管理单页面应用中的页面导航和状态。

  1. 安装Vue Router

    npm install vue-router@next

  2. 创建路由

    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;

  3. 使用路由

    <template>
 <router-view></router-view>
</template>

<script>
import router from './router';

export default {
 router
};
</script>

  4. 完整项目实例
    以下是一个完整的Vue Router项目实例，包含Home和About两个页面。

    // router/index.js
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;
    <!-- src/App.vue -->
<template>
 <div>
   <router-view></router-view>
 </div>
</template>

<script>
import router from '../router';

export default {
 router
};
</script>

Vuex入门与最佳实践

Vuex是Vue.js的官方状态管理库，适用于大规模应用中的状态管理。

  1. 安装Vuex

    npm install vuex@next

  2. 创建Vuex Store

    import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

export default createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 },
 actions: {
   increment({ commit }) {
     commit('increment');
   }
 },
 plugins: [createPersistedState()]
});

  3. 使用Vuex Store

    <template>
 <div>
   <p>{{ count }}</p>
   <button @click="increment">Increment</button>
 </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
 computed: {
   ...mapState(['count'])
 },
 methods: {
   ...mapActions(['increment'])
 }
};
</script>

  4. 复杂状态管理实例
    以下是一个包含动态路由和异步操作的复杂状态管理实例。

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

export default createStore({
 state: {
   count: 0,
   products: []
 },
 mutations: {
   increment(state) {
     state.count++;
   },
   addProduct(state, product) {
     state.products.push(product);
   }
 },
 actions: {
   increment({ commit }) {
     commit('increment');
   },
   addProduct({ commit }, product) {
     commit('addProduct', product);
   }
 }
});
    <!-- src/App.vue -->
<template>
 <div>
   <p>{{ count }}</p>
   <button @click="increment">Increment</button>
   <ul>
     <li v-for="product in products" :key="product.id">
       {{ product.name }} - {{ product.price }}
     </li>
   </ul>
   <button @click="addProduct">Add to Cart</button>
 </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
 computed: {
   ...mapState(['count', 'products'])
 },
 methods: {
   ...mapActions(['increment', 'addProduct']),
   addProduct() {
     this.addProduct({
       id: 1,
       name: 'Product 1',
       price: 10
     });
   }
 }
};
</script>

高级特性和最佳实践

Composition API与选项式API对比

Vue3引入了Composition API，允许更灵活的代码组织和复用。

  1. 选项式API

    export default {
 data() {
   return {
     count: 0
   };
 },
 methods: {
   increment() {
     this.count++;
   }
 }
};

  2. Composition API

    import { ref, onMounted } from 'vue';

const count = ref(0);

function increment() {
 count.value++;
}

onMounted(() => {
 console.log('Component mounted');
});

export default {
 setup() {
   return {
     count,
     increment
   };
 }
};

插件开发与自定义指令

插件和自定义指令可以扩展Vue的功能，增强其灵活性。

  1. 自定义指令

    <div v-my-directive="value"></div>
    import { DirectiveBinding } from 'vue';

export default {
 mounted(el: HTMLElement, binding: DirectiveBinding) {
   console.log(binding.value);
 }
};

  2. 插件开发

    import { App } from 'vue';

export default {
 install(app: App) {
   app.directive('my-directive', {
     mounted(el: HTMLElement, binding: DirectiveBinding) {
       console.log(binding.value);
     }
   });
 }
};

性能优化与调试技巧

性能优化是提高用户体验的重要手段，而调试技巧可以帮助开发者快速定位问题。

  1. 性能优化

    • 减少不必要的计算：使用computed属性减少不必要的重新计算。
    • 懒加载组件：使用动态组件和懒加载来优化页面加载速度。 
      
<template>
<component :is="dynamicComponent"></component>
</template>

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

    export default {
    setup() {
    const dynamicComponent = computed(() => {
    return () => import('./DynamicComponent.vue');
    });

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

  2. 调试技巧

    • Vue Devtools：使用Vue Devtools插件来查看和调试Vue应用的状态。
    • console.log：在关键逻辑处添加console.log来追踪状态变化。
    • Vue.use()：在开发环境启用Vue的调试模式，获取更多的调试信息。 
      
import { createApp } from 'vue';

    const app = createApp(App);
    app.config.devtools = true;
    app.mount('#app');

项目实战与部署

构建完整的Vue3项目

  1. 项目结构

    my-vue3-project/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   └── store/
│       └── index.ts
├── package.json
└── README.md

  2. 创建组件

    <template>
 <div>
   <p>{{ message }}</p>
 </div>
</template>

<script>
export default {
 data() {
   return {
     message: 'Hello Vue'
   };
 }
};
</script>

  3. 路由配置

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

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

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

export default router;

  4. 实例项目
    以下是一个完整的Vue3项目实例，包含组件、路由、状态管理等部分。

    // router/index.js
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;
    // store/index.js
import { createStore } from 'vuex';

export default createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 },
 actions: {
   increment({ commit }) {
     commit('increment');
   }
 }
});
    <!-- src/App.vue -->
<template>
 <router-view></router-view>
</template>

<script>
import router from '../router';

export default {
 router
};
</script>

项目打包与部署

  1. 打包项目

    npm run build

  2. 部署项目

    • 本地服务器：使用http-server或serve命令运行。 
      npm install -g http-server
http-server dist
    • 服务器部署：将打包出来的文件部署到服务器上，可以通过FTP、SCP等工具上传。 
      scp -r dist/* user@hostname:/path/to/deploy
  3. 打包配置文件 
    // vue.config.js
module.exports = {
 outputDir: 'dist',
 publicPath: '/',
 chainWebpack: config => {
   config.optimization.splitChunks({
     chunks: 'all',
     maxInitialRequests: Infinity,
     minSize: 30000
   });
 }
};

实际项目中的常见问题与解决方法

  1. 性能问题

    • 优化路由懒加载：确保只有在需要时才加载组件。
    • 使用Tree Shaking：确保代码轻量，避免不必要的包导入。 
      
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

    const routes = [
    { path: '/', component: () => import('./views/Home.vue') }
    ];

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

    export default router;

  2. 部署问题

    • 跨域问题：确保服务器和应用之间没有跨域限制。
    • 静态资源路径问题：确保静态资源路径配置正确。 
      
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

    const app = createApp(App);
    app.use(router);
    app.use(store);
    app.mount('#app');

通过以上步骤，可以创建、开发、打包和部署一个完整的Vue3项目。希望本文对你在Vue3开发中的实践有所帮助。

点击查看更多内容
发表于 2024.11.20 10:32， 共 35 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

三国纷争

JAVA开发工程师
手记
篇
粉丝
51
获赞与收藏
178

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消