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

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三