vue2升级到Vue3的异同
1.构建项目不一样， 具体查看 构建项目
2.main.js 的不一样
vue2 中的mian.js 里面导入的是vue 实例，
vue 3中的main.js 如下的结构：
注意： 由于vue3.0 使用的是 import {createApp} from ‘vue’ 而不是像vue2.0的import Vue
from ‘vue’。因此之前使用的ui框架以及第三方包可能会因为不支持vue3.0而报错。
标题this 问题
在vue2中使用this打印的结果是当前组件实例对象， 但是在Vue3中的this指向的 代理 proxy,
构建工具的区别
点击查看
vue3的性能主要提升在哪些方面
1.静态提升
下面的静态节点会被提升
- 元素节点
- 没有绑定动态内容
// vue2 的静态节点 render(){ createVNode("h1", null, "Hello World") // ... } // vue3 的静态节点 const hoisted = createVNode("h1", null, "Hello World") function render(){ // 直接使用 hoisted 即可 }
静态属性会被提升
<div class="user"> {{user.name}} </div>
const hoisted = { class: "user" } function render(){ createVNode("div", hoisted, user.name) // ... }
2.预字符串处理话
<div class="menu-bar-container"> <div class="logo"> <h1>logo</h1> </div> <ul class="nav"> <li><a href="">menu</a></li> <li><a href="">menu</a></li> <li><a href="">menu</a></li> <li><a href="">menu</a></li> <li><a href="">menu</a></li> </ul> <div class="user"> <span>{{ user.name }}</span> </div> </div>
编译结果
import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue" const _withScopeId = n => (_pushScopeId("scope-id"),n=n(),_popScopeId(),n) const _hoisted_1 = { class: "menu-bar-container" } const _hoisted_2 = /*#__PURE__*/_createStaticVNode("<div class=\"logo\" scope-id><h1 scope-id>logo</h1></div><ul class=\"nav\" scope-id><li scope-id><a href=\"\" scope-id>menu</a></li><li scope-id><a href=\"\" scope-id>menu</a></li><li scope-id><a href=\"\" scope-id>menu</a></li><li scope-id><a href=\"\" scope-id>menu</a></li><li scope-id><a href=\"\" scope-id>menu</a></li></ul>", 2) const _hoisted_4 = { class: "user" } export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock("div", _hoisted_1, [ _hoisted_2, _createElementVNode("div", _hoisted_4, [ _createElementVNode("span", null, _toDisplayString(_ctx.user.name), 1 /* TEXT */) ]) ])) } // Check the console for the AST
当编译器遇到大量连续（目前的限制是连续10个静态节点）的静态内容，会直接将其编译为一个普通字符串节点
const _hoisted_2 = /*#__PURE__*/_createStaticVNode("<div class=\"logo\" scope-id><h1 scope-id>logo</h1></div><ul class=\"nav\" scope-id><li scope-id><a href=\"\" scope-id>menu</a></li><li scope-id><a href=\"\" scope-id>menu</a></li><li scope-id><a href=\"\" scope-id>menu</a></li><li scope-id><a href=\"\" scope-id>menu</a></li><li scope-id><a href=\"\" scope-id>menu</a></li></ul>", 2)
3.缓存事件处理
<button @click="count++">plus</button>
// vue2 render(ctx){ return createVNode("button", { onClick: function($event){ ctx.count++; } }) } // vue3 render(ctx, _cache){ return createVNode("button", { onClick: cache[0] || (cache[0] = ($event) => (ctx.count++)) }) }
4.block tree
vue2在对比新旧树的时候，并不知道哪些节点是静态的，哪些是动态的，因此只能一层一层比较，这就浪费了大部分时间在比对静态节点上
vue3对比新旧节点，会标记静态节点和动态的节点，对比的时候就不需要采用树的广度和深度算法去进行递归的对比，只要对比动态的节点即可
<form> <div> <label>账号：</label> <input v-model="user.loginId" /> </div> <div> <label>密码：</label> <input v-model="user.loginPwd" /> </div> </form>
5.patch flag
vue2在对比每一个节点时，并不知道这个节点哪些相关信息会发生变化，因此只能将所有信息依次比对
vue3 会采用记录的形式，把节点的动态内容给记录下来，然后在对节点发生变化的节点进行对比更新
<div class="user" data-id="1" title="user name"> {{user.name}} </div>
响应式原理的异同
api方面
VUE2对于js数据处理的是， options Api
Vue3使用的是 composition Api 也可以使用options Api
