2020年，须要了解 Vue3 的哪些知识

做者：Matt Maribojoc
译者：前端小智
来源：medium

点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

前端开发工程师必读书籍有哪些值得推荐？

Vue 是目前前沿开发中最热门的框架之一，到2019年每周的下载率翻了一番。2020 年初 Vue3的发布还会增长它的受欢迎程度。

Vue3 为开发人员提供了更多的控制，它使咱们可以精确地控制项目中发生的事情，从编写定制的编译和渲染方法到直 Vue reactivity API。

Vue3 使用 Proxy 来监听数据的变化

响应性是 VueJS 的核心，数据必须具备依赖性，能够观察并进行更新以响应任何更改，Vue2 使用 Object.defineProperty 建立 getter 和 setter 来实现响应式。

使用Object.defineProperty有两个主要问题，在官方文档中都提到过：Vue 不能检测数组和对象的变化。

对于对象

Vue 没法检测 property 的添加或移除。因为 Vue 会在初始化实例时对 property 执行 getter/setter 转化，因此 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

对于数组

Vue 不能检测如下数组的变更：

1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为何使用 Proxy ?

Vue3 的解决方案是使用基于Proxy的观察者模式来解决 Vue2 响应上的一些限制。

新旧系统之间的主要区别在于，在Vue2中，Object.defineProperty会修改原始数据，而Proxy则不会，Proxy 虚拟化目标数据并设置不一样的处理程序（称为target ），这些处理程序经过getters 和setter拦截数据。

Vue3 意味着咱们无需使用vm.$set来让数据动态的响应，同时也解决 vue2 操做数组没法响应的问题。

正如尤雨溪大哥所总结的那样，基于代理能够支持：

• 检测属性 添加/删除
• 检测数组 index/length 的变化
• 支持Map，Set, WeakMap 和WeakSet

Composition API

这是到目前为止 Vue3 最大的一个变化，它有助于代码的组织和重用性。

目前，在Vue中咱们使用是Options API。 Options API按属性组织代码：data，computed，methods等。

这是一个很是直观的方式，但维护一些复杂组件变得很是困难。 单个功能的代码一般在相隔数百行的多个地方抛出。

可维护性和可读性成为主要问题。

接着，咱们快速了解一下Composition API的工做原理。

import { reactive, computed } from 'vue'

export default {
  setup() {
    let state = reactive({
      input: '',
      groceries: [],
      groceriesLeft: computed(() => { groceries.length })
    })

    function addGrocery() {
      state.groceries.push(state.input)
            state.input = ''
    }

    function deleteGrocery(index) {
            state.groceries.splice(index, 1);
        }
        return { 
            state, 
            addGrocery, 
            deleteGrocery 
        }
  }
}

咱们来分析一下，上面的过程 😉

import { reactive, computed } from 'vue'

Vue Composition API公开了Vue中的许多核心功能，好比reactive和组件方法，因此，咱们须要导入它们。

export default {
   setup() {

setup()方法的引入是 Vue3 中最大的变化之一。 从本质上讲，它使咱们可以肯定传递回模板的内容，不管返回什么，均可以在模板中访问。

咱们能够在 setup 里面设置reactive 数据，生命周期，计算属性，定义的方法并返回咱们想要的任何东西。

let state = reactive({
  input: '',
  groceries: [],
  groceriesLeft: computed(() => { groceries.length })
})

经过以反应式方法包装全部这些数据，全部数据在内部都将变为反应式。 此状态模式来自Composition API文档。

reactive() 函数接收一个对象做为参数，并返回一个代理对象，全部数据在内部都将变为响应式的。

须要注意的一点是咱们声明groceriesLeft变量的方式。它是一个计算的属性，并在setup()方法中定义，再也不单独拎出来声明。

function addGrocery() {
  state.groceries.push(state.input)
  state.input = ''
}

function deleteGrocery(index) {
  state.groceries.splice(index, 1)
}

函数声明却是没啥变化，区别一点是因为全部响应数据都存储在state 对象中，所以咱们必须使用状态对象进行访问，但这不是Vue3特有的。

return { 
  state, 
  addGrocery, 
  deleteGrocery 
}

最后，咱们想从setup()方法返回这些函数，这样声明的数据和方法就可在模板内部访问。

初次引入此方法时，Vue 社区中存在许多反对，由于开发者不但愿被迫编写这种新的方式。 可是，这个也可选的，就是说咱们仍然可使用 vue2 方式来作。

如今能够在Vue中使用 Suspense

Suspense是React的一个功能，现已在Vue3中引入。Suspense 让组件“等待”某个异步操做，直到该异步操做结束便可渲染。

当咱们想要异步加载setup()方法中的内容时，这颇有用。简而言之，只需知道 setup 方法能够像其余方法同样被设置为异步的。

若是咱们要在等待组件获取数据并解析时显示“正在拼了命的加载…”之类的内容，则只需三个步骤便可实现Suspense。

• 将异步组件包装在<template #default>标记中
• 在咱们的 Async 组件的旁边添加一个兄弟姐妹，标签为<template #fallback>。
• 将两个组件都包装在<suspense>组件中

使用插槽，Suspense 将渲染后备内容，直到默认内容准备就绪。而后，它将自动切换以显示咱们的异步组件。

<Suspense> 
  <template #default> 
    <article-info/> 
  </template> 
  <template #fallback> 
    <div>正在拼了命的加载…</div> 
  </template> 
</Suspense>

Fragment

在Vue 3中，咱们能够期待的另外一个使人兴奋的补充是Fragment。你可能会问，什么是碎片？若是你建立一个Vue组件，那么它只能有一个根节点。这意味着不能建立这样的组件

<template>
  <div>Hello</div>
  <div>World</div>
</template>

缘由是表明任何Vue组件的Vue实例须要绑定到一个单一的DOM元素中。惟一能够建立一个具备多个DOM节点的组件的方法就是建立一个没有底层Vue实例的功能组件。

结果发现React社区也遇到了一样的问题。他们想出的解决方案是一个名为 Fragment 的虚拟元素。它看起来差很少是这样的：

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

尽管Fragment看起来像一个普通的DOM元素，但它是虚拟的，根本不会在DOM树中呈现。这样咱们能够将组件功能绑定到一个单一的元素中，而不须要建立一个多余的DOM节点。

目前你能够在Vue 2中使用vue-fragments库来使用Fragments，而在Vue 3中，你将会在开箱即用!

Portals

Portals是一种特殊的组件，目的是在当前组件以外渲染某些内容。这也是React中原生实现的功能之一。下面是 React 文档中关于portals的说法。

Portals 提供了一种第一流的方式，能够将子节点渲染到父组件的DOM层次结构以外的DOM节点中。

这是一种很是好的处理modals、弹出窗口和通常要出如今页面顶部的组件的方式。经过使用portals，你能够确保没有任何一个主组件的CSS规则会影响到你想要显示的组件，而且免除了你用z-index作讨厌的黑客的麻烦。

下面是Portal-Vue文档中的示例屏幕截图和代码。

对于每个Portals，咱们须要指定它的目标目的地，在那里，Portals内容将被渲染。

<template>
  <div>
    <div>
      <p>
        The content below this paragraph is
        rendered in the right/bottom (red) container by PortalVue
      </p>
      <Portal to="right-basic">
        <p class="red">
          This is content from the left/top container (green).
          The cool part is, it works across components,
          so you can send your content anywhere!
        </p>
      </Portal>
    </div>
    <PortalTarget name="right-basic"></PortalTarget>
  </div>
</template>

Vue3 优化了渲染

内部测试代表，Vue3中的模板样式比Vue2快约120％。

有两个关键的优化提升Vue3渲染速度：

1. Block Tree 优化
2. 提高静态节点树

咱们进一步详细介绍一下。

Block Tree 优化

使用虚拟DOM有一个瓶颈，由于每一个组件都必须跟踪其依赖关系。监听这些依赖关系速度会变慢不少，由于它递归地检查整个元素树。

Vue团队注意到的一件事是，在组件中，节点的大部分结构都是静态的。 并且，若是某个节其实是动态的（因为v-if或v-for指令），则其中的许多内容都是静态的。

使用此想法，Vue3将模板分为静态部分与动态部分。 如今，渲染器知道哪些节点是动态的，它不会浪费时间检查静态节点的变化。

这大大减小了须要被动监视的元素数量。

结合全部这些节点可建立一个Block Tree或一个基于指令（v-if，v-for）分为节点块的模板。

在 Block Tree 中，每一个节点具备：

• 彻底静态的节点结构
• 不须要监听的静态内容
• 能够存储在数组中的动态节点

这消除了对每一个元素进行递归检查的须要，从而大大改善了运行时间。

静态树提高(Static Tree Hoisting)

使用静态树提高，这意味着 Vue 3 的编译器将可以检测到什么是静态的，而后将其提高，从而下降了渲染成本。它将可以跳过 patching 整棵树。

这大大减小了虚拟DOM的工做，并节省了大型项目开销，主要是垃圾收集。

支持 Typescript

另外一个变化是Vue代码库将使用Typescript重写，这个对于前端来讲，又得去学习 TS 才能更好的上手 Vue3。

因此 Vue 也提供了两种选择给我:若是你想要Typescript，那就用。若是不想，那就用 Vue2 的方式。

Typescript 规范了 JS 变量中类型信息。多长远来看，这有助于咱们对项目的维护。

超轻量级

目前，VueJS已经很小(20kb gzip压缩)。可是，Vue 团队面临一个问题:新特性增长了每一个用户的捆绑包大小，无论他们是否使用它。

为了解决这个问题，Vue3 更加完全的模块化。 这样作增长须要开发的导入模块数量，但可确保咱们项目中引入未使用的库。

因为 tree shaking ，Vue 3 的估计大小大约压缩了10 kb。 固然，许多库都须要被导入。

准备好了吗

若是你是 Vue 的使用者，那么很明显，Vue3 中的更新将使它变得更加实用且功能强大。

从渲染优化到帮助开发人员编写更具可读性/可维护性的代码，Vue3改善Vue2遇到的许多痛点。

Vue3 已经正式发布了，你准备好了吗，快来上手学习吧！

---

原文：https://medium.com/swlh/what-...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。