Vue3 update

学习视频

配套文档

链接

认识vue

链接

vue3

vue2

vue3源码

vue2源码

• 重写双向绑定

  • vue2对数组不友好，劫持数组方法重写，修改数组length监听不到

• VDOM性能提升

  • 静态标记

• Fragments

  • 支持多个根节点

  • 支持render JSX写法

• Tree-Shaking

• Composition API

config environment

链接

配置环境

node.cn

node.en

nvm

nvm list

nvm install xx.xx.xx

nvm uninstall xx.xx.xx

nvm use xx.xx.xx

vite构建项目

npm init vite@latest

vue cli构建项目

npm init vue@latest

链接

npm

npm run dev的过程

• npm run dev

• package.json:scripts:dev

• vite:package.json:bin:vite:bin/vite.js

• node_modules/.bin/

  • vite // unix shell

  • vite.cmd // windows

  • vite.ps1 // 跨平台

• 如果没有上述文件，回去npm的本地仓库找

• 本地仓库没有就会去环境变量中找，否则报错

vue基础语法

链接

基础语法

语法	补充说明
插值	支持运算
v-if	注释节点
v-show	display:none;
@[variable]="someEvent"; variable = 'click'	动态绑定事件
@[variable].stop="someEvent" .prevent .once ...	阻止冒泡 ...
v-memo	搭配v-for使用，避免重新渲染

virtual DOM

通过js生成的AST节点树，操控js要比直接操控DOM快。

Diff算法

链接

diff

无key

// 三步
patchUnkeyedChildren{
    patch //对比节点
    unmountChildren //删除节点
    mountChildren //添加节点
}

一一替换，多了添加，少了删除。

不变的节点也会被替换，性能浪费。

有key

// 五步
patchKeyedChildren{
    isSameVNodeType //前序对比算法，判断type和key是否相同，不同跳出循环进行尾序算法
    isSameVNodeType //尾序对比算法，判断type和key是否相同
    patch //多了新增
    unmount //少了卸载

    //无序
    //构建新映射关系
    //记录新节点在旧节点中的位置信息
    //多余节点删掉
    getSequence{ //最长递增子序列递增算法，贪心+二分
        //数组索引都为1，从左到右一一对比
        //左大右小索引不变，左小右大索引+1
        //继续往右，找出比该值小的最大索引+1
    }
    // 不在子序列就移动，否则跳过
}

响应式原理

// todo

BEM

// todo

Block-Element__Modify el-input__wrapper--primary