vue2升级到 Vue3的异同（入门须知）

vue2升级到Vue3的异同

构建项目不一样，具体查看构建项目
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

vue2升级到 Vue3的异同（入门须知）相关推荐

Vue2升级到Vue3
最近想玩玩Vue3 如题,Vue3已经是beta版了,想玩玩Vue3,就对原来Vue2的项目进行了升级.参考了慕课网Dell Lee的课程内容和Vue3官方文档. 一.main.js中的变化从技术上 ...
Vue2要不要升级到Vue3？(尤雨溪回复解读)
作者:掘金干货君 https://juejin.cn/post/7117525259212816414 就在前两天,一篇反对Vue2升级到Vue3的文章在vue官方社区引起了热议.(原文链接:Vue ...
创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用v ...
手摸手带你玩转Vue3——Vue2升级Vue3
今年年初,尤大大公布了一个重磅消息,将Vue3作为Vue的默认版本. 这无疑不是对我们开发人员的内卷煽风点火! vue默认版本改动意味着,官方将会把Vue研发重心放到vue3上,vue2也开始走下坡路 ...
Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码
文章目录一.简介二.Vue2和Vue3区别三.Vue知识点学习四.TypeScript知识点一.JavaScript和TypeScript 二.TypeScript的安装和使用 1.Type ...
VUE3/TS/TSX入门手册指北
VUE3入门手册 vue3入门首先查看官方文档:https://cn.vuejs.org/guide/quick-start.html 如果有vue2基础,速成课程:https://www.zh ...
Vue3+TypeScript从入门到进阶（八）——项目打包和自动化部署——附沿途学习案例及项目实战代码
文章目录一.简介二.Vue2和Vue3区别三.Vue知识点学习四.TypeScript知识点五.项目实战六.项目打包和自动化部署一. 项目部署和DevOps 1.1. 传统的开发模式 1 ...
【入门须知】学DIV CSS技术如何入门?
[入门须知]学DIV CSS技术如何入门? 引言: 引用一本书中的一段文字:"当我第一次开始学习汉语时,我的家庭老师老王给了我一本汉英字典.一本汉语语法书和一本初级教程.但是,他将这些书放 ...
latex安装包_LaTeX排版入门须知
LaTeX排版入门须知声明一般而言,TeX和LaTeX有着区别,但是考虑到热门程度,于是使用LaTeX代指相关的所有排版系统,只有在一些情况下会采取不同的称呼.所以这并不是严谨性不够的做法. 简介 ...

vue2升级到 Vue3的异同（入门须知）

vue2升级到Vue3的异同

标题this 问题

构建工具的区别

vue3的性能主要提升在哪些方面

响应式原理的异同

api方面

vue2升级到 Vue3的异同（入门须知）相关推荐

最新文章

热门文章