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