vue3

hunkydory
155 阅读4分钟

vue2 vue3区别

vue3优化vdom

在v2中，每次更新都diff 全量对比， v3只对比有标记的 这样大大减少了非动态内容的对比消耗 提高性能

fragment

v3支持多个根节点

支持render jsx写法 类似于react

支持多v-model用法

treeshaking

保持代码运行结果不变的前期下，去除无用的代码

在v2中 无论我们使用什么功能 他最终一定会在生成代码中，主要原因是vue实例在项目中是单例的，option API捆绑程序无法检测到该对象的哪些属性在代码中被使用到

v3引入treeshaking特性 将全局api分块，如果你不使用某些功能 他不会包含在你的基础包中

例子：你要用watch import {watch} from 'vue' 想用什么引什么 其它的computed没用到 不会给你打包 减少体积

v3 组合式api

setup 函数时编程 也称vue hook

vite

冷服务：默认的构建目标浏览器是能在script标签上支持原生ESM 和原生ESM动态导入

HMR 速度快到惊人的模块热更新HMR 比如说只更改一小块东西 只更新那一小块 不是刷新全部的dom

Rollup打包 它使用rollup打包代码 并且是与配置的 支持大部分rollup插件

初始化项目

npm init vite@latest

cli

基于webpack 依赖多 慢

nvm

专门针对node版本进行管理的工具 通过它可以安装和切换不同版本的nodejs

使用场景

很多项目 其中老项目用v2.5左右 webpack版本也比较低 只能使用10.16.0左右的node版本 但是也有一些项目需要高版本的node 这时候就可以用nvm切换node

安装

安装前要卸载所有node有关

Win10下完全卸载node并安装nvm-windows心刻的博客-CSDN博客win10卸载node

Releases · coreybutler/nvm-windows · GitHub

nrm

是一个npm源管理器 允许你快速的在npm源间切换

安装

npm install -g nrm

nrm ls 查看可选源 星号表示当前使用源

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

nrm use切换源

nrm add (name)(源) 添加源

nrm test npm 测试

public静态资源 不编译

assets编译 比如图片编译成base64

setup、template只能写一个

npm run dev

为什么不npm run vite ： 没有配置vite命令

为什么dev就可以：

使用软链接技术

vite源码

node_module/vite/package.json

配置了bin

"bin":{
    "vite":"bin/vite.js" //配置了软链接  
}

安装module时 会把软链接地址提出来 放到 bin 目录下

执行npm run dev时 从当前目录查找bin 有就去执行

没有会去全局的nodemodule找 如果这个找不到 会去环境变量中找

我们是找得到的 会执行vite下的脚本 执行vite.js

vue3 使用volar插件 要把vetur 禁用

volar 代码切片 实时预览等功能

模板语法&vue指令

模板插值语法
<script setup lang="ts">
​
  const a = 0
</script>
​
<template>
  <div>
    {{a + 1}}
  </div>
</template>
​
​

常用指令与v2差不多

v-if

切换真假dom 浪费性能 注释结点

v-show

操作css 性能好

<div @click="show(2)" class="out">
    <div @click="show(1)" class="in"></div>
  </div>
<!-- 冒泡 子父都触发 -->
​
​
  <div @click="show(2)" class="out">
    <div @click.stop="show(1)" class="in"></div>
  </div>
<!-- 通过stop阻止冒泡 -->
​
​
​
 <form action="">
    <button type="submit" @click.prevent="show(1)">submit</button>
  </form>
  <!-- 通过prevent阻止默认行为 -->
​
v-bind
<script setup lang="ts">
  type Style = {
    color:string,
    height:string
  }
  const style:Style = {
    color:'blue',
    height:'20px'
  }
​
</script>
​
<template>
 <div :style="style">test</div>
</template>

动态绑定class 对象写法 {类名：是否绑定（bool）}

v-model

要让数据先变成响应式数据ref

<script setup lang="ts">
import { ref } from "@vue/reactivity"
​
  const a = ref('abs')
​
</script>
​
<template>
  <input type="text" v-model="a">
  <div>{{a}}</div>
</template>

虚拟DOM &diff算法

虚拟dom ： 通过JS来生成一个AST节点树

其实就是 vue代码 能转化为用js描述的代码 用js虚拟出来的dom

为什么要有虚拟dom

例子

let div = document.createElement('div')
let str = ''
for(const key in div){
    str += key +''
}
console.log(str)

打印一个div上的所有属性 特别多 所以直接操作dom 性能要付出很多代价

但是操作js非常快 所以我们可以用js的计算性能来换取操作dom所消耗的性能

逃不掉操作DOM 但可以尽可能少去操作DOM

DIFF算法

例子

<script setup lang="ts">
​
  const arr :Array<string> = ['abc','s','s']
    arr.splice(2,0,'22')
</script>
​
<template>
  <div v-for="item,idx in arr" :key="idx">{{item}}</div>
</template>

分为有key 和无key的处理方法

无key 源码中patch函数会覆盖（替换）

image-20220917153023459.png 一样的放回 不一样的覆盖 遍历时取两数组长度的较小值（以防数组越界）

非常浪费性能 这里的CD完全可以复用 不用覆盖

有key

image-20220917153418151.png

  • 先比前面的 不一样就跳过（前序对比算法）

image-20220917153501829.png

  • 再从后面对比（尾序对比算法）

  • 新数组中多出来 就挂载 通过patch函数 第一个参数为null

  • 如果是删除的 就卸载

image-20220917153650045.png

  • 把DE都标记 尽可能的复用 （乱序情况）
avatar
文章
阅读
粉丝