介绍vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

MVVM（Model-View-ViewModel）架构

  • 『View』：视图层（UI 用户界面）
  • 『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑）
  • 『Model』：数据层（存储数据及对数据的处理如增删改查）

    1.回顾vue2 对比 vue3

    发现传统的vue2 逻辑比较分散 可读性差 可维护性差
    对比vue3 逻辑分明 可维护性 高

    2.Vue3 新特性介绍

    重写双向绑定

    ```javascript vue2 基于Object.defineProperty()实现

vue3 基于Proxy proxy与Object.defineProperty(obj, prop, desc)方式相比有以下优势：

//丢掉麻烦的备份数据 //省去for in 循环 //可以监听数组变化 //代码更简化 //可以监听动态新增的属性； //可以监听删除的属性 ； //可以监听数组的索引和 length 属性；

let proxyObj = new Proxy(obj,{ get : function (target,prop) { return prop in target ? target[prop] : 0 }, set : function (target,prop,value) { target[prop] = 888; } })

  1. <a name="vcW8q"></a>
  2. ### Vue3 优化Vdom
  3. 在Vue2中,每次更新diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗<br />Vue Template Explorer 我们可以通过这个网站看到静态标记<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/27272831/1656254693174-32864d32-b22e-46b0-8125-0a920e6dbf8a.png#clientId=ufa39f1b5-8d84-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ub7d9d7b3&margin=%5Bobject%20Object%5D&name=image.png&originHeight=634&originWidth=1677&originalType=url&ratio=1&rotation=0&showTitle=false&size=101560&status=done&style=none&taskId=u68121991-7ce8-4fb4-a169-ee344a6b641&title=)
  4. <a name="aiguK"></a>
  5. ### patch flag 优化静态树
  6. ```html
  7. <span>Hello world!</span>
  8. <span>Hello world!</span>
  9. <span>Hello world!</span>
  10. <span>Hello world!</span>
  11. <span>{{msg}}</span>
  12. <span>Hello world!</span>
  13. <span>Hello world! </span>

Vue3 编译后的 Vdom 是这个样子的

  1. export function render(_ctx，_cache，$props，$setup，$data，$options){return (_openBlock(),_createBlock(_Fragment,null，[
  2. _createvNode( "span", null,"Hello world ! "),
  3. _createvNode( "span",null，"Hello world! "),
  4. _createvNode( "span"，null，"Hello world! "),
  5. _createvNode( "span", null，"Hello world! "),
  6. _createVNode("span", null，_toDisplaystring(_ctx.msg)，1/* TEXT */)，
  7. _createvNode( "span", null，"Hello world! "),
  8. _createvNode( "span", null，"Hello world! ")]，64/*STABLE_FRAGMENT */))

新增了 patch flag 标记

  1. TEXT = 1 // 动态文本节点
  2. CLASS=1<<1,1 // 2//动态class
  3. STYLE=1<<2，// 4 //动态style
  4. PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
  5. FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
  6. HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
  7. STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
  8. KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
  9. UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
  10. NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
  11. DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
  12. HOISTED = -1 // 静态节点
  13. BALL = -2

我们发现创建动态 dom 元素的时候，Vdom 除了模拟出来了它的基本信息之外，还给它加了一个标记： 1 / TEXT /
这个标记就叫做 patch flag（补丁标记）
patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。
尽管 JavaScript 做 Vdom 的对比已经非常的快，但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在针对大组件的时候。

Vue3 Fragment

vue3 允许我们支持多个根节点

  1. <template>
  2.   <div>12</div>
  3.   <div>23</div>
  4. </template>
  5. 同时支持render JSX 写法
  7. render() {
  8.         return (
  9.             <>
  10.                 {this.visable ? (
  11.                     <div>{this.obj.name}</div>
  12.                 ) : (
  13.                     <div>{this.obj.price}</div>
  14.                 )}
  15.                 <input v-model={this.val}></input>
  16.                 {[1, 2, 3].map((v) => {
  17.                    return <div>{v}-----</div>;
  18.                 })}
  19.             </>
  20.         );
  21.     },

同时新增了Suspense 和 多 v-model 用法

Vue3 Tree shaking

简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码
在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到
而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中
就是比如你要用watch 就是import {watch} from ‘vue’ 其他的computed 没用到就不会给你打包减少体积

Vue 3 Composition Api

Setup 函数式编程 也叫vue Hook
例如 ref reactive watch computed toRefs toRaws 我们会在下几个章节详解

配置环境

1.安装nodejs（建议装14版本稳定）

装完之后会有一个命令叫 npm
可以在终端输入npm -v 来检查是否安装成功

2.构建vite项目

vite 的优势

  • 冷服务 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入
  • HMR 速度快到惊人的 模块热更新（HMR）
  • Rollup打包 它使用 Rollup 打包你的代码，并且它是预配置的 并且支持大部分rollup插件

使用vite初始化一个项目
npm init vite@latest
yarn create vite

package json 命令解析

  1. {
  2.   "scripts": {
  3.     "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
  4.     "build": "vite build", // 为生产环境构建产物
  5.     "preview": "vite preview" // 本地预览生产构建产物
  6.   }
  7. }

3.安装Vue cli脚手架

npm install @vue/cli -g
检查是否安装成功
vue -V
vue create 构建我们的cli 项目可以去对比一下

Vite目录 & Vue单文件组件 & npm run dev 详解

1.Vite目录

public 下面的不会被编译 可以存放静态资源
assets 下面可以存放可编译的静态资源
components 下面用来存放我们的组件
App.vue 是全局组件
main ts 全局的ts文件
index.html 非常重要的入口文件 （webpack，rollup 他们的入口文件都是enrty input 是一个js文件 而Vite 的入口文件是一个html文件，他刚开始不会编译这些js文件 只有当你用到的时候 如script src=”xxxxx.js” 会发起一个请求被vite拦截这时候才会解析js文件）
vite config ts 这是vite的配置文件具体配置项 后面会详解
VsCode Vue3 插件推荐 Vue Language Features (Volar)

2.SFC 语法规范

.vue 件都由三种类型的顶层语法块所组成：