Vue 3.1.0 的 beta 版发布

大家好，我是若川（点这里加我微信 ruochuan12，长期交流学习）。昨晚尤大视频号直播说到vue 3.1.0 beta版发布了，今天分享这篇文章。也有小伙伴可能注意到了昨晚我一直在送礼物。

点击下方卡片关注我、加个星标，或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列

以往都是纯翻译发给大家，这次换个形式为大家介绍。

编辑 | KnowsCount

         QC-L

本次 beta 版本带来了一些有趣的新特性和错误修复。

新特性

  • onServerPrefetch：composition-api 版本的 serverPrefetch

  • 组件级别的 compilerOptions

  • @vue/compiler-core 支持了空白字符处理策略

  • 支持通过 app.config.compilerOptions 配置运行时的编译器

  • devtools 改进了对 KeepAlive 的支持

  • 支持通过 is="vue:xxx" 将普通元素转换为组件

onServerPrefetch

具体请参见 PR 3070[1] 和 PR 2902[2]

此特性主要解决在 composition-api 情况下没有提供 serverPrefetch 生命周期钩子函数的问题。

这个钩子函数名为 onServerPrefetch。

如果你也这方面的需求，可以尝试升级至 3.1.0-beta 版

相关讨论:

  • vue-apollo[3]

  • app-extension-apollo[4]

@vue/complier-core 支持了空白字符处理策略

具体内容请参阅 PR 1600[5] 和 v2 原有效果[6]。

应用

我们来测试下此策略：

先装个 beta 版本的 @vue/compiler-core

yarn add @vue/compiler-core@beta

新建 index.js 文件

const core = require('@vue/compiler-core')const { baseCompile: complie } = coreconst { ast } = complie(`      foo \n bar baz      `, {whitespace: 'preserve' // condense
})console.log(ast.children[0])
console.log(ast.children[0].content)

大概效果如示例所示：

<!-- 源代码 -->foo \n bar baz     <!-- whitespace: 'preserve' -->foo \n bar baz     <!-- whitespace: 'condense' -->foo bar baz 

源码

原本只在 compiler-core 的 parse 文件中的 defaultParserOptions 提供了默认的 condense 情况

whitespace: 'condense'

在 compiler-core 的 options 文件中新增了 whitespace：

whitespace?: 'preserve' | 'condense'

相关链接：

  • PR 1600[7]

  • stackoverflow[8]

  • vue 2.0/compiler[9]

  • vue 2.0 的 `whitespace`[10]

  • vue 2.0 的 PR[11]

通过 is="vue:xxx" 支持普通元素的转换

这条特性的更新，从源码上看，兼容了两种类型。

  1. 弃用的 v-is 指令

  2. is="vue:xxx" 的属性

源码


let { tag } = node// 1. 动态组件
const isExplicitDynamic = isComponentTag(tag)
const isProp =findProp(node, 'is') || (!isExplicitDynamic && findDir(node, 'is'))
if (isProp) {if (!isExplicitDynamic && isProp.type === NodeTypes.ATTRIBUTE) {// <button is="vue:xxx">// 如果不是 <component>，仅仅是 "vue:" 开头// 在解析阶段会被视为组件，并在此处进行// tag 被重新赋值为 "vue:" 以后的内容tag = isProp.value!.content.slice(4)} else {const exp =isProp.type === NodeTypes.ATTRIBUTE? isProp.value && createSimpleExpression(isProp.value.content, true): isProp.expif (exp) {return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [exp])}}
}

// 当 tag 为 <component>，或者 is="vue:xxx"，跳过后续处理
if (name === 'is' &&(isComponentTag(tag) || (value && value.content.startsWith('vue:')))
) {continue
}
// ...

上述代码中有几个点：

  1. 首先 isComponentTag，用以判断是否为动态组件：

// 此方法用于判断是否为动态组件
function isComponentTag(tag: string) {return tag[0].toLowerCase() + tag.slice(1) === 'component'
}

  1. 查找是否含有 is 属性

// 先查属性
findProp(node, 'is')
// 否则判断是不是动态组件，如果不是，判断是不是指令
!isExplicitDynamic && findDir(node, 'is')

其主要原因是，两者的 AST 结构不同。

相关链接：

  • Support casting plain element[12]

  • Custom Elements Interop[13]

附上 ChangeLog

Bug 修复

  • 兼容： 处理并针对 config.optionMergeStrategies 实现告警 (94e69fd[14])

  • compiler-core: 当注释选项启用时，在生产环境下将保留注释 (e486254[15])

  • hmr: 禁止从组件类型中移除 __file 的 key 值 (9db3cbb[16])

  • hydration: 修复 asnyc 组件 hydrated 前的更新 (#3563[17]) (c8d9683[18]), closes #3560[19]

  • reactivity: 修复 readonly + reactive Map 的追溯 (#3604[20]) (5036c51[21]), closes #3602[22]

  • runtime-core: 确保声明 props 的 key 永远存在 (4fe4de0[23]), closes #3288[24]

  • runtime-core: computed 监听多个 source (#3066[25]) (e7300eb[26]), closes #3068[27]

  • Teleport: 避免改变对 vnode.dynamicChildren 的引用 (#3642[28]) (43f7815[29]), closes #3641[30]

  • watch: 避免遍历 non-plain 对象 (62b8f4a[31])

  • watch: this.$watch 应该支持监听键路径 (870f2a7[32])

特性

  • onServerPrefetch (#3070[33]) (349eb0f[34])

  • 运行时编译器支持了组件级 compilerOptions (ce0bbe0[35])

  • compiler-core: whitespace 处理策略 (dee3d6a[36])

  • config: 利用 app.config.compilerOptions 支持配置运行时编译器 (091e6d6[37])

  • devtools: 升级对 KeepAlive 的支持 (03ae300[38])

  • 支持利用 is="vue:xxx" 将 plain 元素 cast 到组件 (af9e699[39])

性能提升

  • 仅当实际改变时才会触发 $attrs 的更新 (5566d39[40])

  • compiler: 解析结束标签时跳过不必要的检查 (048ac29[41])

参考资料

[1]

PR 3070: https://github.com/vuejs/vue-next/pull/3070

[2]

PR 2902: https://github.com/vuejs/vue-next/pull/2902

[3]

vue-apollo: https://github.com/vuejs/vue-apollo/issues/1102

[4]

其余参考资料省略，可以点击阅读原文查看。

最近组建了一个江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你进群。

················· 若川出品 ·················

今日话题

昨晚尤大在视频号直播，估计挺多人看到直播了。估计看到直播的还是小部分，大部分还是不知道有这个直播。我一直在刷礼物，也是第一次看视频号刷礼物，我也不太懂视频号的玩法。后来才发现可以链接到视频号，还可以关联公众号，说不定还能涨几个粉。但我用的是第二个号没有视频号关联。平时知道有这个东西，但真正用起来又显得有点棘手。欢迎在下方留言~  欢迎分享、收藏、点赞、在看我的公众号文章~

一个愿景是帮助5年内前端人走向前列的公众号

可加我个人微信 ruochuan12，长期交流学习

推荐阅读

我在阿里招前端，我该怎么帮你？（现在还能加我进模拟面试群）

若川知乎问答：2年前端经验，做的项目没什么技术含量，怎么办？
据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘

点击上方卡片关注我、加个星标，或者查看源码等系列文章。
学习源码整体架构系列、年度总结、JS基础系列

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/275916.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

设计模式练习_设计练习是邪恶的

设计模式练习_设计练习是邪恶的

设计模式练习It was the final round of interviews. Or, so the candidate thought.这是采访的最后一轮。 或者&#xff0c;所以候选人认为。 She’d spent all day interviewing in our office. As the final interviewer, I walked her out the building. She seemed confi…
阅读更多...
morningcat2018 LearningDocs

morningcat2018 LearningDocs

2019独角兽企业重金招聘Python工程师标准>>> LearningDocs 学习资料与文档 JCP&#xff08;Java Community Process &#xff0c;Java社区进程 &#xff09; https://www.jcp.org/en/home/index JSR&#xff08;Java Specification Requests&#xff0c;Java规范请求…
阅读更多...
firefox下可恶的value

firefox下可恶的value

前几天做项目 遇到这样一个情况 document.getElementById("txtTest").value "111"; 这条语句在ff下和ie下都是好用的 但是用开发工具看html代码 ie下显示正常 ff下显示的却是修改之前的(实际上已经修改了&#xff0c;只是html没有修改过来) 用js修改input…
阅读更多...
据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘

据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘

1. 前言你好&#xff0c;我是若川[1]&#xff0c;微信搜索「若川视野」关注我&#xff0c;专注前端技术分享&#xff0c;一个愿景是帮助5年内前端开阔视野走向前列的公众号。欢迎加我微信ruochuan12&#xff0c;长期交流学习。这是学习源码整体架构系列 之 launch-editor 源码&…
阅读更多...
mysql 存储 事务_MYSQL 可以在存储过程里实现事务控制吗

mysql 存储 事务_MYSQL 可以在存储过程里实现事务控制吗

展开全部6.7 MySQL 事务与锁定命令6.7.1 BEGIN/COMMIT/ROLLBACK 句法缺省的&#xff0c;MySQL 运行在 autocommit 模式。这就意味着&#xff0c;当你执行完一e69da5e887aa62616964757a686964616f31333361326265个更新时&#xff0c;MySQL 将立刻将更新存储到磁盘上。如果你使用…
阅读更多...
如何忽略证书继续访问_前5个最容易被忽视的可访问性问题

如何忽略证书继续访问_前5个最容易被忽视的可访问性问题

如何忽略证书继续访问Accessibility is quickly becoming one of the most important aspects of the way we use the web, if not the most important. Just between 2017 and 2018, the number of federal court cases regarding web accessibility nearly tripled, signifyi…
阅读更多...
《认清C++语言》のrandom_shuffle()和transform()算法

《认清C++语言》のrandom_shuffle()和transform()算法

1&#xff09;STL中的函数random_shuffle()用来对一个元素序列进行重新排序&#xff08;随机的&#xff09;&#xff0c;函数原型如下&#xff1a; template<class RandomAccessIterator> void random_shuffle( RandomAccessIterator _First, //指向序列首元素的迭代器 R…
阅读更多...
作为前端开发，如何高效学习 TypeScript

作为前端开发，如何高效学习 TypeScript

大家好&#xff0c;我是若川。有朋友跟我说最近面试前端候选人&#xff0c;问到关于 JavaScript 的一些少见误区问题&#xff0c;候选人很多都没回答上来&#xff0c;他很诧异&#xff0c;一个从国际大厂出来的面试者&#xff0c;竟然对 JavaScript 的一些误区问题都不了解。他…
阅读更多...
figma下载_对于这10家公司，Figma是迈向新高度的起点

figma下载_对于这10家公司，Figma是迈向新高度的起点

figma下载Hey everyone! In this post, we are highlighting 10 companies for which the use of Figma has become the starting point on the path to new heights. These are the use cases of problems and their solutions, where Figma played a decisive role.嘿大家&am…
阅读更多...
mysql查询条件为or_使用mysql查询where条件里的or和and

mysql查询条件为or_使用mysql查询where条件里的or和and

为什么要着重讲这块内容呢?因为好多小伙伴都会混淆&#xff0c;要不就是不知道怎么组合使用&#xff0c;今天就给大家讲这部分内容干货&#xff0c;让大家半分钟看懂。AND、OR运算符的组合使用在WHERE子句中&#xff0c;通过AND、OR运算符可以同时连接多个条件&#xff0c;当然…
阅读更多...
sql server（常用）

sql server（常用）

普通用法 //生成 uuid 并转为小写 select LOWER(SUBSTRING(uuid,1,8)-SUBSTRING(uuid,10,4)-SUBSTRING(uuid,15,4)-SUBSTRING(uuid,20,4)-SUBSTRING(uuid,25,12)) from (select cast(NEWID() as varchar(36)) as uuid) s //ea52a7bb-a2aa-44b8-be28-5ebc64defcf9//获取时分秒…
阅读更多...
代码编写中会遇到的安全性问题

代码编写中会遇到的安全性问题

一、常用的攻击手段 1&#xff0e;脚本注入 漏洞描述&#xff1a; 脚本注入攻击在通过浏览器使用用户输入框插入恶意标记或脚本代码时发生。 如&#xff1a;某个输入框允许用户向数据存储中插入内容&#xff0c;如果将一段js脚本插入其中&#xff0c;则当其他用户使用或浏览此数…
阅读更多...
TypeScript 原来可以这么香？！

TypeScript 原来可以这么香？！

先问一个问题&#xff0c;JavaScript有几种数据类型&#xff1f;number、string、boolean、null、undefined、symbol、bigint、object其中 bigint 是 ES2020 新增的数据类型&#xff0c;而早在 TS3.2 时便成为 TS 的标准&#xff0c;其实还有好多 ES 标准是 TS 率先提出的&…
阅读更多...
java8新特性stream深入解析

java8新特性stream深入解析

2019独角兽企业重金招聘Python工程师标准>>> 继续java8源码的发烧热&#xff0c;越看越是有充实的感觉。 数据时代下的产物 Java顺应时代的发展推出的高效处理大量数据能力的api&#xff0c;它专注于对集合对象进行各种非常便利、高效的聚合操作&#xff0c;借助于同…
阅读更多...
mysql内连接的自连接_mysql 内连接、外连接、自连接

mysql内连接的自连接_mysql 内连接、外连接、自连接

一)内连接(等值连接)&#xff1a;查询客户姓名&#xff0c;订单编号&#xff0c;订单价格---------------------------------------------------select c.name,o.isbn,o.pricefrom customers c inner join orders owhere c.id o.customers_id;-------------------------------…
阅读更多...
关于ASP.NET MVC

关于ASP.NET MVC

我是否要学习一下ASP.NET MVC呢&#xff1f;因爲从它刚发布的时候就已经初步的学习了一下&#xff0c;可是一直没有坚持下来。不过心里对于这份惦记&#xff0c;又让我始终放不下&#xff0c;看来应该抽个时间来系统的学习一下。 就这样吧&#xff0c;把自己的博客当成微博来使…
阅读更多...
版式设计与创意 pdf_恋爱与版式

版式设计与创意 pdf_恋爱与版式

版式设计与创意 pdfSince its beginnings, Libération has been characterized by a very distinctive use of typeface, to such an extent that Libé has put its mark on fonts from across different eras, appropriating these in a certain way.小号因斯它的起点&…
阅读更多...
移动网站开发——标记语言

移动网站开发——标记语言

移动互联网被称为“第五次科技革命”&#xff0c;而随着iPhone和Android等智能手机的日渐流行和iPad等平板电脑的出现&#xff0c;移动互联网的潜力和趋势也愈发显现&#xff0c;针对移动设备的网站开发越来越受到关注&#xff0c;国内很多公司也开始重视面向所有移动设备的网站…
阅读更多...
mysql适配器_MySQL适配器PyMySQL详解

mysql适配器_MySQL适配器PyMySQL详解

import pymysqlimport datainfoimport time#获取参数host datainfo.hostusername datainfo.usernamepassword datainfo.passworddatabase datainfo.dbprint()#测试数据库连接def testconnect():#打开数据库链接db pymysql.connect(host,username,password,database)#使用c…
阅读更多...
获取当前Tomcat实例的端口

获取当前Tomcat实例的端口

有时需要在当前代码中获取当前Server实例的端口号, 通过HttpServletRequest请求可以, 但有时也需要在没有请求的情况下获取到端口号. 用以下方法是可以获取到的: public int getHttpPort() {try {MBeanServer server;if (MBeanServerFactory.findMBeanServer(null).size() >…
阅读更多...
最新文章

Copyright @ 2022~2023