您可以为Vue 3.0做准备的5件事

在2019年,Vue框架的受欢迎程度令人难以置信地增长。 Vue每周的下载数量增加了一倍:去年是60万,现在是120万。 期待已久的Vue第三版,即框架的下一个迭代版,将于2020年第一季度发布。

在Vue 3.0中。 计划了许多新功能。 这些新功能旨在提高程序员的效率,改进语法并优化系统性能。 作为支持Vue的人,我努力在创新出现后立即准备好使用它们。



在这里,我整理了一些技巧,这些技巧对于那些想为Vue 3.0的到来做准备的人很有用。 我希望那些遵循这些技巧的人能够很快适应新的条件。

1.查看最新的Vue 3.0功能。


当然,不能为完全未知的事物的到来做准备。 因此,熟悉Vue 3.0中的更改很重要。 我建议特别注意以下几点:

  • Composition API使您可以更好地组织组件代码。
  • 由于输入完成机制, 对TypeScript的支持可帮助简化代码编写。
  • 通过对框架进行大量优化以提高其性能来实现加速渲染
  • 提高静态属性 ,消除了重新创建静态元素的需要。
  • 使用代理对象处理可观察对象有助于提高性能并扩展用于处理反应对象的功能。

另外,我建议您观看Evan Yu关于Vue 3.0设备的表演。 此演示文稿使您可以更好地了解框架背后的想法。

通常,确切地知道在新版本的框架中将出现什么,将发生什么改变绝对很重要。 事实是,这可能会影响程序员如何计划其当前项目的结构。 特别是在涉及新项目的情况下。 现在正在创建并将在不久的将来创建的那些新Vue项目,应考虑到它们向Vue 3.0的转移。 因此,这种转变不会变成一场噩梦。

2.开始学习TypeScript


关于Vue 3.0预期变化的话题之一。 -这是TypeScript支持。 Vue的代码库正在TypeScript中重写。 这将使开发人员有机会在其IDE中使用类型提示和代码完成工具。

重要的是要注意,这并不意味着每个人都绝对需要切换到TypeScript。 Vue项目仍可以用JavaScript编写。 但是使用TypeScript可以提高代码的速度和质量。

TypeScript(TS)是JavaScript的超集。 这是一种语言,使用JavaScript(JS)编写的代码编写而成。 TS和JS之间的区别在于TypeScript允许您指定变量类型。 与类型关联的代码中的错误可以在编译阶段检测到。 这是TypeScript 文档中的几个代码片段。 其中一个用TypeScript编写,另一个用JavaScript编写。

这是JS代码:

function greeter(person) {     return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user); 

这是TS代码:

 function greeter(person: string) {    return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user); 

注意,在TS代码中有实体类型的指示。 在尝试编译TS代码时,如果不是通过字符串,而是通过例如数组,则将greeter TS函数传递给字符串将导致错误消息。

如果您想学习TypeScript- 可以的话 -一些不错的资源。 实际上,关于TS的信息来源很多。 其中,您可以找到所需的确切信息。

3.学习Vue模式功能


Vue 3.0。 包括有关渲染的许多改进。 这包括提高静态元素,改进渲染树的工作,甚至编写自己的渲染方法的能力。

为了充分利用Vue 3.0所提供的功能,您绝对需要完全掌握Vue模板。 很自然,关于模板的最佳知识来源可能是Vue官方文档

此外,了解引发静态元素的机制如何工作以及块渲染树的排列方式有助于提高开发自己的模板的效率。 引发静态元素是一种机制,其操作导致以下事实:每次显示页面时都不会重新创建静态元素。 而是不断使用相同的元素。

由块组成的渲染树有助于简化对反应对象的监视,从而减少渲染期间执行的操作数量。


使用块形成渲染树

4.开始使用Composition API


Vue 3.0的最热门(也是最有争议的)创新之一。 是Composition API。 Vue 2现在使用API​​选项。 使用它时,代码按组件(数据,方法,计算出的属性等)进行分配。

由于有了新的API,所有代码都将被分组。 这将提高其可读性,并简化功能的提取和重用。


API组成

通过提供对Vue核心反应系统的直接访问,新机制可以起作用,这使开发人员可以精确地控制所监视的内容。 另外,引入了一个新的setup()方法,该方法在beforeCreate()之后立即created()而在created()之前立即调用。

最重要的是, Composition API现在可用,因此可以在现有项目中使用。

5.更新Vue生命周期知识


在上一节中,Composition API是向组件添加功能的新方法。 在created()方法之前调用setup()组件生命周期方法的事实表明, setup()无法访问组件数据,其方法或计算的属性。

现在还不清楚Vue 3.0的其他新功能如何。 将与组件的生命周期相关。 但是,不管怎么说,那些想要开始使用Vue 3.0的人应该尽快有效率地更新他们对Vue生命周期方法的了解 。 即,值得注意的是何时某些属性可用,以什么顺序调用方法等等。


Vue生命周期

总结


因此,我想说,一个想要快速学习新技术的人值得学习。 值得付出尽可能多的时间。 Vue开发团队已经向社区明确表明了Vue 3.0框架是什么。 的创建方式为已经使用Vue的用户提供了便利。 因此,这样想是错误的:“ Vue 3出来了,我要等待发布,然后我才能弄清楚。” 事先“了解”会更好。 我希望本文讨论的内容将帮助每个人为Vue 3.0会议做充分的准备。

亲爱的读者们! 您对Vue 3.0有什么期望?

Source: https://habr.com/ru/post/zh-CN482466/


All Articles