带你走进vue3

于 2024-09-17 17:36:26 发布
阅读量1.7k 收藏 12
点赞数 17
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74064480/article/details/142316695
版权

Vue 3知识点整合大纲

  1. 介绍

    • 什么是Vue 3
    • 与Vue 2的主要区别
    • Vue 3的优势与应用场景

  2. 创建Vue 3项目

    • 使用Vue CLI创建项目
    • 项目结构介绍
    • 项目配置

  3. 基本概念

    • 响应式系统
      • Reactive和Ref
      • Computed和Watch
    • Composition API
      • setup函数
      • Reactive和Ref在Composition API中的使用
      • 生命周期钩子
    • Options API
      • Data
      • Methods
      • Computed
      • Watchers
      • 生命周期钩子

  4. 模板与指令

    • Vue模板语法
    • 条件渲染
    • 列表渲染
    • 事件处理
    • 表单绑定
    • 组件和插槽

  5. 组件

    • 组件基础
    • 父子组件通信
    • Provide/Inject
    • 动态组件
    • 异步组件

1. 介绍

什么是Vue 3

Vue 3是尤雨溪（Evan You）团队开发的一款用于构建用户界面的渐进式JavaScript框架。Vue 3对比Vue 2进行了全面升级，不仅在性能上有了显著提升，还引入了许多新特性，如Composition API、Fragments、Teleport以及更好的TypeScript支持。

与Vue 2的主要区别
  1. 性能提升: Vue 3通过编译器优化、代理对象（proxy）代替getter/setter以及优化虚拟DOM算法，使得应用性能显著提升。
  2. Composition API: 新引入的Composition API使逻辑复用性更强，并且在大型项目中更易于组织代码。
  3. Fragments和Teleport: Vue 3支持多个根节点（Fragments），并引入Teleport特性，可以将模板的一部分渲染到指定位置，不再局限于父子关系。
  4. 更好的TypeScript支持: Vue 3在设计之初就充分考虑了TypeScript的支持，使开发者能够更安全地编写代码。
  5. Tree-shaking: 提供了更好的Tree-shaking支持，使得打包体积更小。
Vue 3的优势与应用场景

优势:

  • 性能优异：更快的虚拟DOM和响应式系统。
  • 更好的代码组织：Composition API使得代码模块划分更加清晰。
  • 现代工具链：Vue 3与现代开发工具（如Vite）无缝集成，提升开发体验。

应用场景:

  • 中大型前端项目：例如电商平台、社交网络、后台管理系统。
  • 移动端应用：通过Vue与跨平台框架如Ionic、Weex或Capacitor结合。
  • 单页应用（SPA）：通过Vue Router和Vuex打造高性能SPA。

2. 创建Vue 3项目

使用Vue CLI创建项目

Vue CLI是Vue官方提供的一款脚手架工具，它极大地简化了项目的创建和配置过程。以下是使用Vue CLI创建Vue 3项目的步骤：

  1. 安装Vue CLI:

    npm install -g @vue/cli

  2. 创建新项目:

    vue create my-vue3-project

  3. 选择所需的配置：

    • 手动选择特性：如Babel、TypeScript、Router、Vuex、CSS Pre-processors等。
    • 保存配置以供将来使用。

  4. 进入项目目录:

    cd my-vue3-project

  5. 启动开发服务器:

    npm run serve

于此，你将成功创建并运行一个基本的Vue 3项目。

项目结构介绍

一个典型的Vue 3项目包含以下文件和目录：

  • node_modules/: 项目依赖包存放目录。

  • public/: 静态文件，例如html、ico等。

  • src/: 源代码目录，主要包括以下子目录和文件：

    • assets/: 存放静态资源，如图片、CSS文件。
    • components/: 通用组件存放目录。
    • views/: 页面级别组件存放目录（当使用vue-router时）。
    • App.vue: 根组件。
    • main.js: 入口文件。
    • router/index.js: 路由配置文件（当使用vue-router时）。
    • store/index.js: 状态管理配置文件（当使用vuex时）。

  • package.json: 项目配置文件，记录项目信息和依赖包。

  • babel.config.js: Babel配置文件。

  • vue.config.js: Vue CLI配置文件。

项目配置

Vue CLI提供了极大的灵活性，允许通过vue.config.js文件进行项目配置。以下是一些常见的配置项：

module.exports = {
    // 基本路径
    publicPath: './', 
    // 生成的打包文件目录
    outputDir: 'dist',
    // 存放静态文件的目录
    assetsDir: 'static',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // 是否使用带有浏览器内编译器的完整构建版本
    runtimeCompiler: false,
    // 开启生产环境的 source map
    productionSourceMap: false,
    // 三方插件的选项
    pluginOptions: {},
    // webpack配置
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src')
            }
        }
    },
    // 开发服务器配置
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null,
    }
};

3. 基本概念

响应式系统

Vue 3的响应式系统是其核心特性之一，Vue 3使用Proxy代替Vue 2中的getter/setter实现，实现了更高效的响应追踪和更少的性能开销。

Reactive和Ref

reactive用于创建响应式对象，而ref用于创建基本类型的响应式引用。

import { reactive, ref } from 'vue';

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

const count = ref(0);

state.count++;
count.value++;
Computed和Watch

computed用于定义计算属性，watch用于监听数据变化。

import { reactive, computed, watch } from 'vue';

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

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

watch(() => state.count, (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
});
Composition API

Composition API是Vue 3的亮点，使得代码在逻辑复用和模块化方面更加高效和灵活。

setup函数

setup函数是Composition API的核心，用于组合逻辑片段。

import { reactive, toRefs } from 'vue';

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

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

        return {
            ...toRefs(state),
            increment
        };
    }
};
生命周期钩子

Vue 3中，生命周期钩子可以在setup中使用组合式API的函数来管理。

import { onMounted, onUnmounted } from 'vue';

export default {
    setup() {
        onMounted(() => {
            console.log('Component is mounted!');
        });

        onUnmounted(() => {
            console.log('Component is unmounted!');
        });
    }
};

4. 模板与指令

Vue模板语法

Vue的模板语法基于HTML，允许将模板与数据绑定，从而自动渲染界面。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>
条件渲染

可以使用v-if和v-show进行条件渲染。

<template>
  <div v-if="isShown">Content is shown</div>
  <div v-else>Content is hidden</div>
</template>

<script>
export default {
  data() {
    return {
      isShown: true
    };
  }
};
</script>
列表渲染

可以使用v-for进行列表渲染。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  }
};
</script>
事件处理

可以使用v-on进行事件处理。

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

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

可以使用v-model进行双向绑定。

<template>
  <input v-model="message" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>
组件和插槽

可以定义和使用组件，以及使用插槽实现组件内容分发。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:default>
      <p>This is a slot content</p>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

5. 组件

组件基础

组件是Vue应用的基本组成单位，可以通过<script setup>或<script>来定义。

<!-- MyComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

<!-- App.vue -->
<template>
  <MyComponent />
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>
父子组件通信

可以通过props和emit进行父子组件通信。

<!-- ChildComponent.vue -->
<template>
  <button @click="emit('increment')">Increment</button>
</template>

<script>
export default {
  emits: ['increment']
};
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @increment="handleIncrement" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleIncrement() {
      console.log('Increment event received');
    }
  }
};
</script>
Provide/Inject

provide和inject用于跨层级组件间通信。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent />
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const sharedData = ref('Shared Data');
    provide('sharedData', sharedData);
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ sharedData }}</div>
</template>

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

export default {
  setup() {
    const sharedData = inject('sharedData');
    return {
      sharedData
    };
  }
};
</script>
动态组件

可以使用<component>和is属性实现动态组件。

<template>
  <component :is="currentComponent" />
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>
异步组件

可以使用defineAsyncComponent定义异步组件。

import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncComponent: defineAsyncComponent(() => import('./AsyncComponent.vue'))
  }
};
夜不眠，码三千
关注
Vue3.0快速上手-重要知识点罗列-系列二
JackieDYH的博客
07-31 4965
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy
Vue3通透教程【二】更高效的构建工具—Vite
热门推荐
官方推荐
02-06 6万+
为大家介绍新一款的构建工具——Vite，当然我们Vite更多的是被用于开发阶段，下面也为大家介绍到了 Vite 想比于 webpack 编译中的优势，以及Vite构建Vue3项目的步骤教程，赶快跟着我尝试一下吧！
Vue3 介绍
2401_82603291的博客
02-02 663
Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：
尚硅谷--vue3快速上手
最新发布
qq_45902184的博客
08-19 1126
修改名字
vue3
qq_20881791的博客
04-18 131
mmit 双向数据绑定 <template> <input type="text" :value="keyword" @input="$emit('update:keyword',$event.target.value)" placeholder="请输入内容"> </template> <script> export default { name: "itInput", props:["key
一文带你从Vue2.x大迈步走进Vue.js 3.0新时代
前端高薪进击手记
07-28 1003
Vue2.x与及Vue3.x都已经出来很久了，种种原因，它们的区别一只没搞太明白，今天就通过这篇文章给大家梳理一下Vue3.0升级过后带来了哪些新特性以及这些性变化带来的各方面性能或者代码质量的提升。这里占用大家一杯奶茶的时间，反正不花钱，看了没收获的评论区怼我便是😁。.........
前端开发之走进Vue.js PPT.zip
04-18
在前端开发中，会涉及到一些重要的前端技术栈，如vue.js、react.js、node.js、前端安全、react-native等。同时，也需要借助一些工具，如代码编辑工具（WebStorm、VS Code）、代码版本控制工具（Git、SVN）、代码包...
Vue--》Vue3打造可扩展的项目管理系统后台的完整指南（一）
ztK63LrD的博客
05-23 1802
今天开始使用搭建一个项目管理的后台，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端vue知识，然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（：快速轻量且功能丰富的前端构建工具，帮助开发人员更高效构建现代Web应用程序。：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。
Vue源码解读之vue-router路由
01-08
看过前章vuex状态管理的分享之后，相信对路由这块也是非常感兴趣的，同样的模式，同样的方式，我们走进GitHub之vue-router 同样直接走进 src components：route-link 组件 和 router-view 组件 实现 history：关于...
Vue3
qq_53464269的博客
02-18 939
vue3
Vue-3
tingless的博客
09-23 208
父子通信+双向绑定 思路：用v-model 的原理：@input和：value。需要在子组件里设置data，新设置两个变量，不能直接在props里的变量改，不然会报错。再然后用@input方法下面在发射一个方法，让父组件监听，监听下面再把父组件的值修改。 父组件访问子组件 1.$children 事件需要在父组件加！ 子组件下面的data和methods得和template在同一级 而且都要加上this <div id="box"> <zxx></zxx>
Vue——3
Americacaptain的博客
08-21 508
组件注册： 注册语法： Vue.component('组件名称', { data: 组件数据， template: 组件模板内容 }） 定义一个名为button-counter例子: <script type="text/javascript"> Vue.component('button-counter',{ //第一个参...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值