vue3笔记-脚手架篇

第一章 基础篇

第二章 脚手架篇

vue2与vue3的一些区别

1. 响应式系统：

• Vue 2 使用 Object.defineProperty 进行响应式数据的劫持和监听，它对数据监听是一项项的进行监听，因此，当新增属性发生变化时，它无法监测到，并且响应性能不是很好。
• Vue 3 使用 Proxy 来实现响应式系统，它用一个中间代理来管理所有的数据响应，这使得它可以监听新增和删除的属性，并且提供了更好的性能和扩展性。

2. 组件实例：

• Vue 2 的组件实例使用 选项式 API，将组件的逻辑拆分为不同的生命周期钩子函数，随着组件复杂度的增加，代码结构变得臃肿。

  <template>
    <div>
      
    div>
  template>
  
  <script>
  export default {
    data() {
      return {
        
      };
    },
    methods: {
  
    },
  };
  script>
  

• Vue 3 引入了 组合式 API，通过 setup 函数来组织逻辑，可以根据功能进行逻辑的组合，提高了代码的可维护性和重用性。

  <template>
      <div>
  
      div>
  template>
  
  <script setup>
  
  script>
  
  <style lang="scss" scoped>
  
  style>
  

3. 编译器：

• Vue 2 使用基于字符串的模板编译方式，模板中的指令和插值表达式在编译阶段被转换成对应的 JavaScript 代码。

• Vue 3 引入了编译器的静态标记，利用更先进的编译技术（如基于 AST 的编译），提供了更好的性能和错误检查。

  基于 AST（抽象语法树）的编译是一种常见的编译技术，它将源代码转换为一个表示代码结构的树状数据结构。在编译过程中，AST 用于分析、转换和生成代码。

4. 性能优化：

• Vue 3 在编译和运行时都进行了一系列的性能优化，比如更细粒度的更新跟踪、更高效的虚拟 DOM 算法等，提供了更高的性能和更小的包体积。

5. TypeScript 支持：

• Vue 3 对 TypeScript 的支持更加友好，它在编译器和 API 设计上进行了改进，提供了更好的类型推导和类型检查。

Vue CLI

Vue CLI（Command Line Interface）是一个用于快速开发 Vue.js 项目的官方脚手架工具。它提供了一套完整的项目脚手架，包括构建、开发服务器、代码规范等，帮助你快速搭建和管理 Vue.js 项目。

下载安装Vue CLI

npm install -g @vue/cli

安装完成以后，使用vue命令创建你的vue项目

vue create ny-project

运行完命令以后需要选择项目的一些配置依赖，选择完毕以后，回车Vue CLI就会帮我们创建一个vue项目，cd到项目文件下，运行 npm run server启动项目。

如果是第一次使用vueCLI创建项目，可以先去B站找几个项目视频看一下，会教你怎么选择依赖，对项目文件进行解读。

Vite

Vite 是一个现代化的前端构建工具，用于快速开发现代化的 Web 应用程序。它与传统的打包工具（如Webpack）不同，使用了基于原生 ES 模块的开发服务器，在开发过程中具有更快的冷启动时间和更高的性能。

Vite 针对现代浏览器进行了优化，利用原生 ES 模块的特性，可以直接在浏览器中执行模块，而无需像传统方式那样将它们打包成一个或多个文件。这使得在开发过程中，代码变更后的热重载速度非常快，加快了开发者的反馈循环。

使用vite创建你的vue项目

npm create vite@latest

这个命令会检查本地是否有vite，如果没有vite会提示您先下载vite脚手架，然后输入项目名称，选择项目依赖，创建好项目文件目录后，在项目目录下运行npm install下载依赖包，即可创建好一个vue项目。

vite目录