请选择 进入手机版 | 继续访问电脑版
搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

vue3.0跟进

[复制链接]
查看: 86|回复: 0

2万

主题

2万

帖子

7万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
74897
发表于 2020-9-15 14:27 | 显示全部楼层 |阅读模式
2020-04-22 09:20:08
转自:https://juejin.im/post/5e9f6b3251882573a855cd52?utm_source=gold_browser_extension
尤雨溪关于vue3.0 Beta的直播分享

全新文档RFCs

Vue.js 3.0 Beta发布后的工作重点是保证稳定性和推进各类库集成
所有的进度和文档都将在全新RFCs文档可以看到。

六大亮点

我的关键词 vue3.0跟进  新闻咨询 1682788-20200422092819243-404603856


  • Performance:性能更比Vue 2.0强。
  • Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。
  • Composition API:组合API
  • Fragment, Teleport, Suspense:“碎片”,Teleport即Protal传送门,“悬念”
  • Better TypeScript support:更优秀的Ts支持
  • Custom Renderer API:暴露了自定义渲染API
Performance

我的关键词 vue3.0跟进  新闻咨询 1682788-20200422093258440-1437273744


  • 重写了虚拟Dom的实现(且保证了兼容性,脱离模版的渲染需求旺盛)。
  • 编译模板的优化。
  • 更高效的组件初始化。
  • update性能提高1.3~2倍。
  • SSR速度提高了2~3倍。
下面是各项性能对比
我的关键词 vue3.0跟进  新闻咨询 1682788-20200422093611579-1009060860


要点1:编译模板的优化

我的关键词 vue3.0跟进  新闻咨询 1682788-20200422093731559-570373778

假设要编译以下代码
  1.   <span/>  {{ msg }}
复制代码

将会被编译成以下模样:
  1. import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"export function render(_ctx, _cache) {  return (_openBlock(), _createBlock("div", null, [    _createVNode("span", null, "static"),    _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)  ]))}// Check the console for the AST
复制代码
注意看第二个_createVNode结尾的“1”:
Vue在运行时会生成number(大于0)值的PatchFlag,用作标记。
我的关键词 vue3.0跟进  新闻咨询 1682788-20200422094044138-2080061722


仅带有PatchFlag标记的节点会被真正追踪,且无论层级嵌套多深,它的动态节点都直接与Block根节点绑定,无需再去遍历静态节点
再看以下例子:
我的关键词 vue3.0跟进  新闻咨询 1682788-20200422094325601-843758326

我的关键词 vue3.0跟进  新闻咨询 1682788-20200422094348435-1918769022
  1.   static  {{ msg }}   
复制代码
会被编译成:
  1. import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"export function render(_ctx, _cache) {  return (_openBlock(), _createBlock("div", null, [    _createVNode("span", null, "static"),    _createVNode("span", {      id: _ctx.hello,      class: "bar"    }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["id"])  ]))}
复制代码
PatchFlag 变成了9 /* TEXT, PROPS */, ["id"]
它会告知我们不光有TEXT变化,还有PROPS变化(id)
这样既跳出了virtual dom性能的瓶颈,又保留了可以手写render的灵活性。 等于是:既有react的灵活性,又有基于模板的性能保证。
要点2: 事件监听缓存:cacheHandlers

我的关键词 vue3.0跟进  新闻咨询 1682788-20200422094700550-810321645

假设我们要绑定一个事件:
  1.       {{msg}}  
复制代码
关闭cacheHandlers后:
  1. import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"export function render(_ctx, _cache) {  return (_openBlock(), _createBlock("div", null, [    _createVNode("span", { onClick: _ctx.onClick }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["onClick"])  ]))}
复制代码
onClick会被视为PROPS动态绑定,后续替换点击事件时需要进行更新。
开启cacheHandlers后:
  1. import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"export function render(_ctx, _cache) {  return (_openBlock(), _createBlock("div", null, [    _createVNode("span", {      onClick: _cache[1] || (_cache[1] = $event => (_ctx.onClick($event)))    }, _toDisplayString(_ctx.msg), 1 /* TEXT */)  ]))}
复制代码
cache[1],会自动生成并缓存一个内联函数,“神奇”的变为一个静态节点。 Ps:相当于React中useCallback自动化。
并且支持手写内联函数:、
  1.       {{msg}}  
复制代码
补充:PatchFlags枚举定义

而通过查询Ts枚举定义,我们可以看到分别定义了以下的追踪标记:
[code]export const enum PatchFlags {    TEXT = 1,// 表示具有动态textContent的元素  CLASS = 1

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表