vue低层_【译PPT/必读】尤雨溪:Vue 3.0的设计原则

2023-10-08 00:40

本文主要是介绍vue低层_【译PPT/必读】尤雨溪:Vue 3.0的设计原则,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

2019年11月11号在Vue Toronto 2019会议上,@尤雨溪做了关于《Design Principles of Vue 3.0》的分享。

本PPT作者@尤雨溪,翻译作者:黑叔666。

(注:由于黑叔英语基础薄弱,若有任何更好的翻译,可评论区留言噢!)

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:VUE 3.0 的设计原则

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:快速状态更新

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:全世界每周有100万活跃用户!

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:NPM每周下载:超过去年的100%以上

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:路易威登使用的是Vue和Nuxt技术

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:Vue设计面临的挑战

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:VUE有非常多样化的用户

刚刚从HTML和CSS有了进展的初学者

从JQuery框架的转过来的专业人员

从另一个框架转过来的搬砖老兵

后端工程师寻找轻量级的前端解决方案

架构师为整个组织选择基础

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:VUE有非常多样化的使用场景

将交互性结合到遗留的应用程序上

一次性项目需要快速周转,但不需要长期团队维护

可预测复杂度的中型项目

大型项目预计将持续数年,团队运动

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:设计包括解决权衡问题

为简单性而优化的API会导致大规模的可维护性问题

重型工具增加了进入壁垒并限制了用例

更多的功能会导致更多的臃肿

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:框架必须在多个维度上进行考虑

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:可接近性 VS 可扩展性

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:CDN构建 VS Vue脚手架

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:选项API和合成API

为什么要介绍另一种方式

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:选项API

直观易用

大规模应用程序中的可扩展性问题

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:合成API

纯添加剂

可与选项API一起使用

提供更灵活的代码组织和逻辑重用功能

提供出色的typescript支持

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:TypeScript vs JavaScript

TypeScript真的是有必要吗?

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:为什么TypeScript:

Pro:优秀的IDE支持自动补全和类型信息

Pro:重构大型项目中旧代码的信心

Cons:学习成本

Cons:初期发展缓慢

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:In vue 3

TS定义对JS用户也有好处

使用TS和JS的组件代码看起来基本相同

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:模板 VS JSX:

为什么要提供两种?

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:作为一个包容的框架意味着去迎合不同背景的用户

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:另外,模板允许我们获得更好的性能

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:尽管Vue可以确保组件树级别的更新最少,但它仍然是每个组件实例中的完全diff。

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:传统虚拟DOM的瓶颈

传统VDOM的性能取决于模板的总大小,而不是模板中动态内容的数量

AAffA0nNPuCLAAAAAElFTkSuQmCC

完全动态渲染逻辑使得很难对用户意图进行安全的最大AOT优化假设。

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:语法约束促使更好的优化

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:让我们开始一个最简单的例子

完全没有节点结构更改

只有一个动态节点

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:节点结构改变:v-if

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:节点结构改变:v-if

外面的v-if:v-if是唯一的动态节点

里面的v-if:{{message}}是唯一的动态节点

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:节点结构改变:v-for

外面的v-for:v-for是唯一的动态节点(作为碎片)

里面的每一个v-for迭代:{{item.message}}是唯一的动态节点

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:这是一棵大树

基于结构指令划分为“块”的模板

在每个块中,节点结构是完全静态的

每个块只需要一个扁平的数组来跟踪动态节点

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:使用新策略,更新性能是动态内容的数量而不是总模板大小决定

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:更新性能基准

v-for有1000次迭代

在每次迭代中,12个DOM元素嵌套3层深,2个动态类绑定,1个动态文本插值,1个动态id属性绑定

更新所有动态绑定,平均运行100次

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:Power vs Size

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:Vue2的困境:

每个新特性都会增加每个用户的包大小

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:在Vue 3中

大多数全局api和内部帮助程序作为ES模块导出被提供(可摇动的树)

编译器也为模板生成树可更改代码

不要为你从未使用过的功能付费

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:框架一致性与低层韧性

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:

库 vs 框架

原始 vs 抽象

集市 vs 大教堂

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:小范围问题

开始使用的概念更少

更多的灵活性和更多的用户机会->活跃生态系统

较小的维护面-> 团队可以专注于探索新的想法

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:小范围关注

在用简单的概念解决固有的复杂问题时需要更多的管道工程

随着时间的推移,模式自然会出现,并成为半必需的知识,但通常没有正式的文档记录

生态系统移动过快会导致分裂和持续的变动

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:大范围问题

最常见的问题可以通过内置的抽象来解决

集中的设计过程确保了一致和连贯的生态系统

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:大范围关注

更高的前期学习障碍

不灵活的内置解决方案不适合用例

更大的维护面使引入基本的新思想更加尖

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:进步的地方

分层设计,允许以渐进的方式选择功能

低入门学习障碍

常见问题的文档解决方案

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

译文:在Vue 3中

与vue 2相同的连贯体验

router,Vuex&test-utils将收到相应的更新以符合此愿景

甚至更低层次的灵活性

一流的自定义渲染器和定制的编译器api

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

AAffA0nNPuCLAAAAAElFTkSuQmCC

关于译者

『前端进阶周刊』- 黑叔666

这篇关于vue低层_【译PPT/必读】尤雨溪:Vue 3.0的设计原则的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/161525

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

AI一键生成 PPT

AI一键生成 PPT 操作步骤 作为一名打工人,是不是经常需要制作各种PPT来分享我的生活和想法。但是,你们知道,有时候灵感来了,时间却不够用了!😩直到我发现了Kimi AI——一个能够自动生成PPT的神奇助手!🌟 什么是Kimi? 一款月之暗面科技有限公司开发的AI办公工具,帮助用户快速生成高质量的演示文稿。 无论你是职场人士、学生还是教师,Kimi都能够为你的办公文

4B参数秒杀GPT-3.5:MiniCPM 3.0惊艳登场!

​ 面壁智能 在 AI 的世界里,总有那么几个时刻让人惊叹不已。面壁智能推出的 MiniCPM 3.0,这个仅有4B参数的"小钢炮",正在以惊人的实力挑战着 GPT-3.5 这个曾经的AI巨人。 MiniCPM 3.0 MiniCPM 3.0 MiniCPM 3.0 目前的主要功能有: 长上下文功能:原生支持 32k 上下文长度,性能完美。我们引入了

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域,图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能,成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限,比如只有一台高性能电脑时,如何高效地让七人同时流畅地进行设计工作,便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器(CPU):选择多核、高线程的处理器,例如Intel的至强系列或AMD的Ry

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo