Vue3的这些你可能不知道！

本文由作者MattMaribojoc翻译！Vue是目前前沿开发中最流行的框架之一，2019年每周下载量翻了一番，2020年初Vue3的发布也将增加其受欢迎程度。Vue3为开发人员提供了更多控制权，它允许我们精确控制项目中发生的事情，从编写自定义编译和渲染方法到直接使用Vue反应性API。Vue3使用Proxy来监控数据变化。响应式是VueJS的核心。数据必须是相关的，并且可以观察和更新以响应任何变化。Vue2使用Object.defineProperty创建getter和setter来实现响应式。使用Object.defineProperty主要有两个问题，官方文档中有提到：Vue无法检测到数组和对象的变化。对于对象，Vue无法检测属性的添加或删除。由于Vue在初始化实例时会对属性进行getter/setter转换，因此该属性必须存在于数据对象上，Vue才能将其转换为响应式。对于数组，Vue无法检测到以下数组变化：当您使用索引直接设置数组项时，例如：vm.items[indexOfItem]=newValue当您修改数组的长度时，例如：vm.items。length=newLength例如例子：varvm=newVue({data:{items:['a','b','c']}})vm.items[1]='x'//不响应vm.items.length=2//没有响应为什么要使用Proxy？Vue3的解决方案是使用基于Proxy的观察者模式来解决Vue2响应的一些限制。新旧系统的主要区别在于，在Vue2中，Object.defineProperty修改了原始数据，而Proxy则没有，Proxy虚拟化了目标数据并设置了不同的handlers（称为targets），通过getters和setters传递拦截数据。vue3意味着我们不需要使用vm.$set让数据动态响应，同时也解决了vue2操作数组无法响应的问题。正如尤雨西总结的那样，基于代理可以支持：检测属性的添加/删除检测数组索引/长度的变化支持Map、Set、WeakMap和WeakSetCompositionAPI这是Vue3迄今为止最大的变化，它有助于代码组织和可重用性。目前，在Vue中我们使用OptionsAPI。OptionsAPI按属性组织代码：data、computed、methods等。这是一种非常直观的方式，但维护一些复杂的组件会变得非常困难。单个函数的代码经常被抛在相隔数百行的多个地方。可维护性和可读性成为主要关注点。接下来，让我们快速了解一下CompositionAPI的工作原理。import{reactive,computed}from'vue'exportdefault{setup(){letstate=reactive({input:'',groceries:[],groceriesLeft:computed(()=>{groceries.length})})functionaddGrocery(){state.groceries.push(state.input)state.input=''}functiondeleteGrocery(index){state.groceries.splice(index,1);}return{state,addGrocery,deleteGrocery}}}我们分析一下，上面的过程??import{reactive,computed}from'vue'VueCompositionAPI暴露了Vue中的很多核心功能，比如reactive和component方法，所以我们需要import它们。exportdefault{setup(){setup())方法的引入是Vue3中最大的变化之一。本质上，它允许我们确定传回给模板的内容，以及返回的任何内容都可以在模板中访问。我们可以设置响应式数据、生命周期、计算属性、定义的方法并返回我们在设置中想要的任何东西。letstate=reactive({input:'',groceries:[],groceriesLeft:computed(()=>{groceries.length})})通过将所有这些数据包装在一个反应??式方法中，所有数据将在内部变成反应式模式。此状态模式来自CompositionAPI文档。reactive()函数接受一个对象作为参数并返回一个代理对象，所有的数据都会在内部变成反应性的。需要注意的一件事是我们声明groceryLeft变量的方式。它是一个计算属性，在setup()方法中定义，不再单独声明。functionaddGrocery(){state.groceries.push(state.input)state.input=''}functiondeleteGrocery(index){state.groceries.splice(index,1)}函数声明没有太大变化，不同的是全部responses数据都保存在state对象中，所以我们要使用state对象进行访问，但这并不是Vue3特有的。return{state,addGrocery,deleteGrocery}最后，我们希望从setup()方法中返回这些函数，以便可以在模板内访问声明的数据和方法。首次引入这种方法时，Vue社区中存在很多反对意见，因为开发人员不想被迫编写这种新方法。然而，这也是可选的，这意味着我们仍然可以使用vue2的方式来完成它。Suspense现已在Vue中可用Suspense是React的一个特性，已在Vue3中引入。Suspense使组件“等待”异步操作，直到异步操作在呈现之前完成。当我们想在setup()方法中异步加载内容时，这很有用。简而言之，只需知道设置方法可以像任何其他方法一样异步。如果我们想在等待组件获取数据并解析它时显示类似“Desperatelyloading...”的内容，我们只需三步即可实现Suspense。将异步组件包装在标签中在带有标签的异步组件旁边添加一个同级组件。使用插槽将两个组件包装在一个组件中，Suspense将呈现回退内容，直到默认内容准备就绪。然后它会自动切换到显示我们的异步组件。

FragmentinVue3，又一个精彩另外我们可以期待的是Fragments。你可能会问，什么是片段？如果你创建一个Vue组件，那么它只能有一个根节点。这意味着无法创建像这样的组件，因为代表任何Vue组件的Vue实例需要绑定到单个DOM元素。创建具有多个DOM节点的组件的唯一方法是创建一个没有底层Vue实例的功能组件。原来React社区也有同样的问题。他们提出的解决方案是一个名为Fragment的虚拟元素。它看起来像这样：classColumnsextendsReact.Component{render(){return(HelloWorld);}}虽然是片段看起来像一个普通的DOM元素，但它是虚拟的，根本不会在DOM树中渲染。这样我们就可以将组件功能绑定到单个元素中，而无需创建额外的DOM节点。目前，您可以使用vue-fragments库在Vue2中使用Fragments，而在Vue3中，您将能够开箱即用！门户门户是特殊组件，旨在呈现当前组件之外的内容。这也是React原生实现的功能之一。以下是React文档中关于门户的内容。门户提供了一种一流的方式来将子节点渲染到父组件的DOM层次结构之外的DOM节点中。这是处理出现在页面顶部的模式、弹出窗口和一般组件的好方法。通过使用门户，您可以确保主要组件的任何CSS规则都不会影响您要显示的组件，并省去使用z-index进行讨厌的黑客攻击的麻烦。下面是来自Portal-Vue文档的示例屏幕截图和代码。对于每个Portal，我们需要指定其目标目的地，即Portal内容将呈现的位置。Vue3优化渲染内部测试表明Vue3中的模板样式优于Vue2大约快120%。提升Vue3渲染速度的关键优化有两个：BlockTree优化，改进静态节点树下面再详细介绍一下。BlockTree优化使用虚拟DOM存在瓶颈，因为每个组件都必须跟踪其依赖项。监听这些依赖项要慢得多，因为它会递归地检查整个元素树。Vue团队注意到的一件事是，在组件中，大多数节点结构是静态的。而且，如果一个部分实际上是动态的（由于v-if或v-for指令），它的许多内容都是静态的。利用这个思想，Vue3将模板分为静态和动态部分。现在渲染器知道哪些节点是动态的，它不会浪费时间检查静态节点的变化。这大大减少了需要被动监控的元素数量。组合所有这些节点创建一个块树或一个模板，该模板根据指令（v-if、v-for）划分为节点块。在BlockTree中，每个节点都有：完全静态的节点结构静态内容不需要监听动态节点可以存储在数组中这样就不需要对每个元素做递归检查，大大提高了运行时间.StaticTreeHoisting使用静态树提升，这意味着Vue3的编译器将能够检测到什么是静态的，然后将其提升，从而降低渲染成本。它将能够跳过修补整棵树。这大大减少了虚拟DOM的工作并节省了大型项目开销，主要是垃圾收集。支持Typescript的另一个变化是Vue代码库将使用Typescript重写。前端的话，要学好TS才能更好的上手Vue3。所以Vue也为我提供了两个选择：如果你想要Typescript，就使用它。如果没有，就用Vue2的方式。Typescript标准化了JS变量中的类型信息。从长远来看，这有助于我们维护项目。超轻量级VueJS目前已经非常小（压缩后20kb）。然而，Vue团队面临一个问题：新功能增加了每个用户的包大小，无论他们是否使用它。为了解决这个问题，Vue3进行了更彻底的模块化。这样做会增加需要开发的导入模块的数量，但确保将未使用的库拉入我们的项目。由于treeshaking，Vue3的估计大小约为10kb。当然，需要导入很多库。准备好？如果您是Vue用户，很明显Vue3中的更新将使它更加可用和强大。从渲染优化到帮助开发者编写更具可读性/可维护性的代码，Vue3改进了许多Vue2遇到的痛点。Vue3已经正式发布，你准备好了吗？快来学习吧！作者：MattMaribojoc-know-about-vue3-in-2020-b36a2feb5dad本文转载自微信公众号“大招天下”，可通过以下二维码关注。转载本文请联系大千世界公众号。