关于javascript:Vue30变动简介

4/17 beta
7/18 RC https://github.com/vuejs/rfcs…
RFCs 文档：https://github.com/vuejs/rfcs

对终端用户有显著感知的优化

Performance：性能更比 v2 强
Tree shaking support：能够将无用模块“剪辑”，仅打包须要的。
Composition API：组合 API
Fragment, Teleport, Suspense：新增原生性能“碎片”，Teleport 即 Protal 传送门，“悬念”
Better TypeScript support：更优良的 Ts 反对
Custom Renderer API：裸露了自定义渲染 API

重写了虚构 dom 的实现，且保障了兼容性
编译模板的优化
- 为什么：vdom 实质还是须要花工夫渲染 diff
- 怎么做：编译优化次要的计划
  - 基于模版间接生成命令式 dom【angular】
  - vue2.x 的 diff 形式为全副节点递归比照，vue 3 利用剖析模版优化编译时的 diff 内容。
- 保留 vdom 起因
  - 思考兼容性 v2 render 函数 jsx
  - 提供了一个很好的模版之外更灵便简单的编写 dom 的形式尤其对于库作者
更高效的组件初始化
- 对组件实例创立进行很大优化，比照纯 js 占用工夫：
  - update 性能进步 1.3~2 倍
  - mount 性能进步 1.3～1.5 倍
  - SSR 速度进步了 2~3 倍

https://vue-next-template-exp…

Vue 提供相似于 HTML 的模板语法，将模板编译为可返回虚构 DOM 树的出现函数。通过 DIFF 算法，递归遍历两个虚构 DOM 树并比拟每个节点上的每个属性来确定理论 DOM 的哪些局部须要更新。

传统 vdom 的性能跟模版大小正相干，跟动静节点的数量无关。在一些组件整个模版内只有大量动静节点的状况下，这些遍历都是性能的节约。

示例：

<div>
  <span>static!</span>
  <span>{{msg}}</span>
  <span id="id">{{msg}}</span>
  <span :id="id">{{msg}}</span>
</div>

划分不同的 block 及动态节点与动静绑定节点

_createVNode 办法后的内容叫做 patchFlag，是在编译时生成的一个 hint，在 vnode 更新 patch 阶段标记该节点是否追踪变动
/ TEXT/ 标记只需对 msg 的文字变动进行追踪
动静节点的绑定与嵌套层级无关，所有节点间接绑定在根及节点的 block 中
属性的绑定也雷同：动态书写的属性只有在创立的时候会创立一次，后续不再进行追踪；动静绑定的属性 patchFlag 会产生对应的变动

把大量的动态节点晋升，进行复用

动态节点会放在渲染函数之外，，也就是在利用启动的时候创立一次，这些动态的虚构节点在每次创立的时候被不停复用，而不是像以前一样在每次更新的时候创立一堆新的 vdom 对象，销毁旧对象，节俭内存空间

当动态节点数据十分大时，会将动态节点以 innerHtml 的模式直接插入

<div>
  <span @click="onclick">static!</span>
</div>

在编译绑定函数时会进行动态剖析，判断是否能够被 cache 起来。

如果能够被缓存，则会在第一次渲染时会创立这个内联函数并缓存，内联函数中援用最新的绑定函数，后续的更新间接在 cache 中取同一个函数，也就不须要再扭转，将绑定函数变成动态

即便绑定的是内联函数也会被 cache 起来

事件缓存在组件中的劣势在组件中更加显著

如果未增加该优化，每次优化都传递新的内联函数，父组件一旦更新，子组件也会跟着更新
类比 react hooks，所有的函数在传到子组件的时候都是从新创立的，如果想要确保子组件不更新须要应用 useMemo 将其包裹起来，Vue 实际上是在编译时将 useMemo 这步操作做好
很显著，Vue 的格调就是让一些轻微的，然而可能会影响到整体性能的小优化，间接在编译时替用户做好。

能够将无用模块“剪辑”，仅打包须要的（比方 v -model,<transition>，用不到就不会打包）。
- 咱们在我的项目中都会应用一些构建工具如 Webpack，Rollup，这些工具都是有 treeshaking 性能的，前提是所有的货色都须要 import 来写，然而工具对于库自身无奈进行 tree-shaking。所以 v3 自身在对于代码打包的时候会做一些操作，只引入用到的模块。当然，一些必备的的模块如 vdom 的更新算法及响应式零碎是肯定会蕴含在包里的。
- 示例
```
<div>
  <input v-model="model" ></input>
  <input v-model="model" type="text"></input>
  <input v-model="model" :type="text"></input>
  <input v-model="model" type="checkbox"></input>
</div>
```
一个简略“HelloWorld”大小仅为：13.5kb
- 11.75kb，仅 Composition API。
  - V2 中有一些无奈被 tree-shaking 的 Option API，后续可能会提供一个开关来强制删除这个 Option API。
蕴含运行时残缺性能：22.5kb
- 领有更多的性能，却比 v2 更迷你。

可与现有的 Options API 一起应用
灵便的逻辑组合与复用
v3 的响应式模块能够和其余框架搭配应用

混入(mixin) 将不再作为举荐应用，Composition API 能够实现更灵便且无副作用的复用代码。

能够将 Composition API 了解为新增加的 API，并不影响原有 API 的应用

官网 RFC 文档：https://composition-api.vuejs…

详见 Composition API 简介

不再限于模板中的单个根节点
- Vue2 中，模版只能有一个根节点，但在 Vue3 中能够书写多个根节点，在 render 函数中会将根节点主动变为一个_Fragment【示例】
render 函数也能够返回数组了，相似实现了 React.Fragments 的性能。
‘Just works’

Teleport 原先是对标 `React Portal（减少多个新性能，更强）

但因为 Chrome 有个提案，会减少一个名为 Portal 的原生 element，为防止命名抵触，改为 Teleport

次要做的事：用一种间接申明的形式来将子组件装置到 DOM 中的其余地位

一个简略示例：

<body>
  <div id="app">
    <h1>Move the #content with the portal component</h1>
    <teleport to="#endofbody">
      <div id="content">
        <p>
          this will be moved to #endofbody.<br />
          Pretend that it's a modal
        </p>
        <Child />
      </div>
    </teleport>
  </div>
  <div id="endofbody"></div>
  <script>
    new Vue({
      el: "#app",
      components: {Child: { template: "<div>Placeholder</div>"}
      }
    });
  </script>
</body>

咱们会失去如下的后果：

<teleport>的所有子代 - 在此示例中：<div id =“content”> 和 <Child> 将附加到 <div id =“endofbody”>
作为这些子项之一的 <Child> 组件将依然是 <teleport> 父级的子组件, 也就是说 <teleport> 是通明的

<div id="app">
  <!-- -->
</div>
<div id="endofbody">
  <div id="content">
    <p>
      this will be moved to #endofbody.<br />
      Pretend that it's a modal
    </p>
    <div>Placeholder</div>
  </div>
</div>

RFC 文档：https://github.com/vuejs/rfcs…

应用文档：https://portal-vue.linusb.org/

Suspense 翻译为：“悬念”【试验性功能】

可在嵌套层级中期待嵌套的异步依赖项
- 在一个嵌套的组件树渲染到屏幕上之前，先在内存里进行渲染。在渲染过程中记录所有存在异步依赖的组件，只有在所有的异步依赖都被 resolve 之后才会把整个树渲染到 dom 中去
反对async setup()
- 如果在组件中应用了 async setup()函数，这个组件就会被看作异步组件，suspense 就会期待 async setup()函数中所有的 promise 都 resolve 之后，再把整个树渲染进去。
反对异步组件

Vue 3 是用 typeScript 编写的库，能够享受到主动的类型定义提醒
JavaScript 和 TypeScript 中的 API 是雷同的。
- 事实上，代码也基本相同
反对 TSX
class 组件还会持续反对，然而须要引入 vue-class-component@next，该模块目前还处在 alpha 阶段。

Vue 3 + TypeScript 插件：

能够在单文件中对模版里的表达式进行类型查看，主动补全等性能。
实质是把模版编译成 TS，进行一个操作，再把 TS 的操作反馈到模版中去

正在进行 NativeScript Vue 集成，凋谢更多底层性能
用户能够尝试 WebGL 自定义渲染器，与一般 Vue 应用程序一起应用（Vugel）。

意味着当前能够通过 vue，Dom 编程的形式来进行 webgl 编程。感兴趣能够看这里：Getting started vugel

Codepen
应用 Vite 通过以下形式启动我的项目：
```
npm init vite-app hello-vue3
```
vite 是一个新工具，法语“快”的意思。地址：github.com/vuejs/vite

一个繁难的 http 服务器，无需 webpack 编译打包，依据申请的 Vue 文件，间接发回渲染，且反对热更新（十分快）

大多数官网框架部件也提供了 v3 反对。最新状态：https://github.com/vuejs/vue-…
V3 文档已更新：v3.vuejs.org（注：新文档（尤其是《迁徙指南》）仍在开发中，将在整个 RC 阶段持续欠缺。）
Devtools Beta 已获批准，可在 Chrome 网上利用店中应用（注：devtools 须要 vue@^3.0.0-rc.1）

v2 还有 2.7 版本
- 将有最初一个小版本（2.7）
- 从 Vue 3 向后移植兼容的改良(不损坏兼容性前提下)
- 加上在 Vue 3 中删除的性能的弃用正告
- LTS 18 个月。

最初倡议：Vue 3虽好，如果你的我的项目很稳固，且对新性能无过多的要求或者迁徙老本过高，则不倡议降级。

<Suspense>
<script setup>
<style vars>

这些性能现已公布，目标是收集理论应用状况的反馈，但它们可能仍会收到重大更改 / 重大调整。它们可能会在 3.0 中放弃试验状态，并最终成为 3.1 的一部分。

v3 最大的扭转是退出了这个灵感来源于 React Hook 的 Composition API，这个 API 将对 vue 编程产生了根本性改革，然而 v3 还是兼容 v2 的 Options API。除此之外，还引入了一些不兼容批改，具体可查看 Vue3 已合并的 RFC。

先看一个示例：

<template>
  <button @click="increment">
    Count is: {{state.count}}, double is: {{state.double}}
  </button>
</template>

<script>
import {reactive, computed} from 'vue'

export default {setup(props, context) {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })
    
    function increment() {state.count++}
    
    return {
      state,
      increment
    }
  }
}
</script>

能够看到 v3 的组件大体还是和 v2 统一，由 template、script 和 style 组成，作出的扭转有以下几点：

组件减少了 setup 选项，组件内所有的逻辑都在这个办法内组织，返回的变量或办法都能够在模板中应用。
v2 中 data、computed 等选项依然反对，但应用 setup 时不倡议再应用 v2 中的 data 等选项。
提供了 reactive、computed、watch、onMounted 等抽离的接口代替 v2 中 data 等选项。

随着 Vue 的采用率增长，许多用户也正在应用 Vue 来构建大型项目，这些我的项目是由多个开发人员组成的团队在很长的工夫内重复进行和保护的。

咱们目击了其中一些我的项目遇到了 Vue 以后 API 所带来的编程模型的限度。这些问题能够概括为两类：

随着性能的增长，简单组件的代码变得越来越难以推理。这种状况尤其产生在开发人员正在浏览本人未编写的代码时。根本原因是 Vue 的现有 API 通过选项强制执行代码组织，然而在某些状况下，通过逻辑思考来组织代码更有意义。

不足用于在多个组件之间提取和重用逻辑的洁净且收费的机制。（无关“逻辑提取和重用”的更多详细信息）

该 RFC 中提议的 API 在组织组件代码时为用户提供了更大的灵活性。当初能够将代码组织为各自解决特定性能的函数，而不用总是通过选项来组织代码。API 还使在组件之间甚至内部组件之间提取和重用逻辑变得更加简略。

在 RFC 的开发动机中也能够看出 Composition API 是为了解决 v2 在应答大型简单我的项目时 Option API 的各种缺点与有余

Options API 是把代码分类写在几个 Option 中：

export default {components: {},
  data() {},
  computed: { },
  watch: { },
  mounted() {},
}

当组件比较简单只有多数逻辑的时候，在各个 Option 之间来回穿梭还不算麻烦，但当一个 vue 组件内存在多个逻辑时会怎么呢？

应用 Options API 时，雷同的逻辑写在不同的中央，各个逻辑的代码穿插错乱，这对保护他人代码的开发者来说绝不是一件简略的事，理分明这些代码都须要破费不少工夫。
而应用 Composition API 时，雷同的逻辑能够写在同一个中央，这些逻辑甚至能够应用函数抽离进去，各个逻辑之间界线明显，即使保护他人的代码也不会在“读代码”上破费太多工夫。

v2 中咱们通常应用 mixin 来实现逻辑复用，但他的问题也非常明显：

命名抵触。mixin 的所有 option 如果与组件或其它 mixin 雷同会被笼罩
没有运行时实例。顾名思义，mixin 不过是把对应的 option 混入组件内，运行时不存在所抽取的逻辑实例。
涣散的关系。Options API 注定所抽取的逻辑的组织是涣散，逻辑外部之间的关系也是涣散的。
宛转的属性减少。mixin 退出的 option 是宛转的，尤其是在有多个 mixin 的时候，无奈晓得以后属性是哪个 mixin 的。

在 vue3 中提供了一种叫 Composition Function 的形式，这种形式容许像函数般抽离逻辑：

<template>
  <div>
   <p> {{count}}</p>
    <button @click="onClick" :disabled="state">Start</button>  
  </div>
</template>

<script>
  import {ref} from 'vue'
  // 倒计时逻辑的 Composition Function
  const useCountdown = (initialCount) => {const count = ref(initialCount)
    const state = ref(false)
    const start = (initCount) => {
      state.value = true;
      if (initCount > 0) {count.value = initCount} 
      if (!count.value) {count.value = initialCount}
      const interval = setInterval(() => {if (count.value === 0) {clearInterval(interval)
          state.value = false
        } else {count.value--}
      }, 1000)
    }
    return {
      count,
      start,
      state
    }
  }
  
  export default {setup() {
    // 间接应用倒计时逻辑
     const {count, start, state} = useCountdown(10)
     const onClick = () => {start()
     }
     return  {count, onClick, state}
   }
  }
</script>

v3 倡议应用如 React hook 中一样应用 use 结尾命名抽取的逻辑函数，如上代码抽取的逻辑简直如函数个别，应用的时候也极其不便。

开发人员在大型项目上的另一个常见性能要求是更好的 TypeScript 反对。Vue 以后的 API 在与 TypeScript 集成时提出了一些挑战，这次要是因为 Vue 依赖单个 this 上下文来公开属性，并且 this 在 Vue 组件中的应用比一般 JavaScript 更具魔力（例如 this 嵌套在 methods 指向组件实例而非 methods 对象的点下方的外部函数）。换句话说，Vue 的现有 API 只是在设计时就没有思考类型推断，并且在尝试使其与 TypeScript 完满配合时会产生很多复杂性。

v2 对 ts 的反对次要是通过 vue-class-component，还需引入依赖包，且毛病也非常显著：要使 Class API 解决类型问题，它必须依赖装璜器 - 这是一个十分不稳固的第 2 阶段提案，在实现细节方面存在很多不确定性。

相比与 v2，v3 对 ts 的反对则好得多：

v3 中是在 setup 中进行编程，setup 不依赖this, 大部分 API 大多应用一般的变量和函数，这些变量和函数天然是类型敌对的。
用 Composition API 编写的代码能够享受残缺的类型推断，简直不须要手动类型提醒。这也意味着用提议的 API 编写的代码在 TypeScript 和一般 JavaScript 中看起来简直雷同。
这些接口已取得更好的 IDE 反对，即便非 TypeScript 用户也能够从中受害。

setup 是 vue 新增的一个选项，它是组件内应用 Composition API 的入口。setup 中不应用 this 上下文。

调用工夫
setup 是在创立 vue 组件实例并实现 props 的初始化之后执行，也是在 beforeCreate 钩子之前执行, 这意味着 setup 中无奈应用其它 option（如 data）中的变量，而其它 option 能够应用 setup 中返回的变量。

模板应用

如果 setup 返回一个对象，这个对象的所有属性会合并到 template 的渲染上下文中，也就是说能够在 template 中应用 setup 返回的对象的属性。

<template>
  <div>{{count}} {{object.foo}}</div>
</template>

<script>
  import {ref, reactive} from 'vue'

  export default {setup() {const count = ref(0)
      const object = reactive({foo: 'bar'})

      // expose to template
      return {
        count,
        object
      }
    }
  }
</script>

与 Render Function/jsx 联合应用

setup 也能够返回 render function，应用办法与 vue2 中的 render 办法相似。

import {h, ref, reactive} from 'vue'

export default {setup() {const count = ref(0)
    const object = reactive({foo: 'bar'})

    return () => h('div', [count.value, object.foo])
  }
}

setup 的参数

setup 有两个参数，第一个参数为 props，是组件的所有参数，与 vue2 中一样，参数是响应式的，扭转会触发更新；第二个参数是 setup context，蕴含 emit 等属性。
```
const MyComponent = {setup(props, context) {
    context.attrs
    context.slots
    context.emit
  }
}
```

this 的应用

this is not available inside setup(). Since setup() is called before 2.x options are resolved, this inside setup() (if made available) will behave quite differently from this in other 2.x options. Making it available will likely cause confusions when using setup() along other 2.x options. Another reason for avoiding this in setup() is a very common pitfall for beginners

v3 中同时反对 Options API 与 Composition API，因为 setup()会在 Option API 解析之前调用，而此时 setup()外部的 this 指向与 Option API 中的齐全不同，十分可能引起凌乱。

故而，setup 中不应用 this 上下文。

reactive函数接管一个对象，并返回一个对这个对象的响应式代理。它与 v2 中的 Vue.obserable()是等价的

const obj = reactive({count: 0})

ref 函数接管一个用于初始化的值并返回一个响应式的和可批改的 ref 对象。该 ref 对象存在一个 value 属性，value 保留着 ref 对象的值。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

isRef用于判断变量是否为 ref 对象。

const unwrapped = isRef(foo) ? foo.value : foo

toRefs 用于将一个 reactive 对象转化为属性全副为 ref 对象的一般对象。

const state = reactive({
  foo: 1,
  bar: 2
})
const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:
{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

toRefs 在 setup 或者 Composition Function 的返回值时能够保障在应用解构语法之后对象仍旧为相应式

import {reactive, toRefs} from 'vue'
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })
  return state
}
function useFeature2() {
  const state = reactive({
    a: 1,
    b: 2
  })
  return toRefs(state)
}

export default {setup() {
    // 应用解构之后 foo 和 bar 都丢失响应式
    const {foo, bar} = useFeatureX()
    // 即使应用了解构也不会丢失响应式
    const {a, b}= useFeature2()
    return {
      foo,
      bar
    }
  }
}

computed 函数与 vue2 中 computed 性能统一，它接管一个函数并返回一个 value 为 getter 返回值的不可扭转的响应式 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2
plusOne.value++ // error,computed 不可扭转


// 同样反对 set 和 get 属性
onst count = ref(1)
const plusOne = computed({get: () => count.value + 1,
  set: val => {count.value = val - 1}
})
plusOne.value = 1
console.log(count.value) // 0

readonly 函数接管一个对象（一般对象或者 reactive 对象）或者 ref，并返回一个 只读的 原始参数对象代理，在参数对象扭转时，返回的代理对象也会相应扭转。如果传入的是 reactive 或 ref 响应对象，那么返回的对象也是响应的。

简而言之就是给传入的对象新建一个只读的正本。

const original = reactive({count: 0})

const copy = readonly(original)

watchEffect(() => {
  // 原始对象的变动会登程正本的 watch
  console.log(copy.count)
})

// 原始对象扭转，正本的值也会扭转
original.count++

// 正本不可更改
copy.count++ // warning!

在追踪其依赖时立刻运行一个函数，并在依赖发生变化时从新运行

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

勾销察看

接口会返回一个函数，该函数用以勾销察看。

const stop = watchEffect(() => {/* ... */})
// later
stop() // 勾销之后对应的 watchEffect 不会再执行

革除副作用（side effect）

为什么须要革除副作用？有这样一种场景，在 watch 中执行异步操作时，在异步操作还没有执行实现，此时第二次 watch 被触发，这个时候须要革除掉上一次异步操作。
```
watch(onInvalidate => {const token = performAsyncOperation(id.value)
  onInvalidate(() => {
    // id has changed or watcher is stopped.
    // invalidate previously pending async operation
    token.cancel()})
})
```
watch 提供了一个 onInvalidate 的副作用革除函数，该函数接管一个函数，在该函数中进行副作用革除。在以下状况中调用：
- watch 的 callback 行将被第二次执行时。
- watch 被进行时，即组件被卸载之后

接口还反对配置一些选项以扭转默认行为，配置选项可通过 watch 的最初一个参数传入。

flush
当同一个 tick 中产生许多状态渐变时，Vue 会缓冲观察者回调并异步刷新它们，以防止不必要的反复调用。

默认的行为是：当调用观察者回调时，组件状态和 DOM 状态曾经同步。

这种行为能够通过 flush 来进行配置，flush 有三个值，别离是 post(默认)、pre 与sync。sync示意在状态更新时同步调用，pre则示意在组件更新之前调用。
```
watchEffect(() => {/* ... */},
  {flush: 'sync'}
)
```
onTrack 与 onTrigger 用于调试:
- onTrack：在 reactive 属性或 ref 被追踪为依赖时调用。
- onTrigger：在 watcher 的回调因依赖扭转而触发时调用。
```
watchEffect(() => {/* side effect */},
  {onTrigger(e) {debugger}
  }
)
```

onTrack 与 onTrigger 仅实用于开发模式。

相比于 v2 的 watch，Composition API 的 watch 接口不仅仅是将其逻辑抽取进去，更减少了一些性能。

根本用法

const state = reactive({count: 0})
const inputRef = ref('')
// state.count 与 inputRef 中任意一个源扭转都会触发 watch
watch(() => {console.log('state', state.count)
  console.log('ref', inputRef.value)
})

指定依赖源

 const state2 = reactive({count: ''})
 const ref2 = ref('')
 // 通过函数参数指定 reative 依赖源
 // 只有在 state2.count 扭转时才会触发 watch
 watch(() => state2.count,
   () => {console.log('state2.count',state2.count)
     console.log('ref2.value',ref2.value)
   })
// 间接指定 ref 依赖源
watch(ref2,() => {console.log('state2.count',state2.count)
  console.log('ref2.value',ref2.value)
})

watch 多个数据源

const state = reactive({a: 'a', b: 'b'})

watch(
  // state.a 和 state.b 任意一个扭转都会触发 watch 的回调
  () => [state.a, state.b],
  // 回调的第二个参数是对应上一个状态的值
  ([a, b], [preA, preB]) => {console.log('callback params:', a, b, preA, preB)
    console.log('state.a', state.a)
    console.log('state.b', state.b)

const ref1 = ref(1)
const ref2 = ref(2)
watch([ref1, ref2],([val1, val2], [preVal1, preVal2]) => {console.log('callback params:', val1, val2, preVal1, preVal2)
  console.log('ref1.value:',ref1.value)
  console.log('ref2.value:',ref2.value)
})

watchEffect 的性能及应用办法 watch 同样实用【勾销察看 / 革除副作用 /flush/ 调试】

Composition API 当然也提供了组件生命周期钩子的回调。

import {onMounted, onUpdated, onUnmounted} from 'vue'

const MyComponent = {setup() {onMounted(() => {console.log('mounted!')
    })
    onUpdated(() => {console.log('updated!')
    })
    onUnmounted(() => {console.log('unmounted!')
    })
  }
}

比照 vue2 的生命周期钩子

beforeCreate -> 应用 setup()
created -> 应用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

更多内容详见 Composition API 文档

链接汇总：

vue3 文档

RFCs 文档

v3 编译代码演示网址

Teleport RFC

Teleport 文档

Getting started vugel

Codepen

github.com/vuejs/vite

官网框架 v3 反对最新状态

参考资料：

Composition API 文档

尤雨溪 B 站直播：聊聊 Vue.js 3.0 Beta

抄笔记：尤雨溪在 Vue3.0 Beta 直播里聊到了这些…

Vue3 Composition API 应用教程

infoQ：Vue3 新 API 介绍

英文原文

Vue3 设计过程尤小右

7/18 v3 RC 版本

2019/6/8 VueConf state of vue PPT

关于javascript:Vue30变动简介

Performance

vdom

传统 vdom 的性能瓶颈

编译模版的优化

优化运行时的内存占用 hoistStatic

事件侦听器缓存 cacheHandler

Tree-shaking

Composition API 合成 API

Fragments 碎片

Teleport

suspense

更好的 TypeScript 反对

Custom Render API 自定义渲染器 API

试用 Vue3 路径

其余局部

试验性功能

CompositionAPI

Options API 与 Composition API

代码组织

逻辑抽取与复用

TS 类型反对

Composition API 介绍

setup

reactive

ref

isRef

toRefs

computed

readonly

watchEffect

watch

Lifecycle Hooks

Just My Socks（注册教程内含优惠码）

关于javascript:Vue30变动简介

Performance

vdom

传统 vdom 的性能瓶颈

编译模版的优化

优化运行时的内存占用 hoistStatic

事件侦听器缓存 cacheHandler

Tree-shaking

Composition API 合成 API

Fragments 碎片

Teleport

suspense

更好的 TypeScript 反对

Custom Render API 自定义渲染器 API

试用 Vue3 路径

其余局部

试验性功能

CompositionAPI

Options API 与 Composition API

代码组织

逻辑抽取与复用

TS 类型反对

Composition API 介绍

setup

reactive

ref

isRef

toRefs

computed

readonly

watchEffect

watch

Lifecycle Hooks

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）