Vue3新增API

对比

1配置项
3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同

没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变

2.渲染
Vue2.x使用的Virtual Dom实现的渲染

Vue3.0不论是原生的html标签还是vue组件，他们都会通过h函数来判断，如果是原生html标签，在运行时直接通过Virtual Dom来直接渲染，同样如果是组件会直接生成组件代码
3.数据监听
Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的，而vue3.0的版本，是基于Proxy进行监听的，其实基于proxy监听就是所谓的lazy by default，什么意思呢，就是只要你用到了才会监听，可以理解为‘按需监听’，官方给出的诠释是：速度加倍，同时内存占用还减半。

4.按需引入
Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等。

5.对比与注意

• 3.0比2.0 快2倍

• 3.0去掉了filter, 么有beforeCreate created,用setup取代

• reactivity是可以单独作为库使用的

• 单独功能可以抽离 取代了mixin 优于mixin 解决上下反复横跳

• 支持多个子节点 fragment

• setup里没有this

• Proxy实现响应式不需要set delete 兼容性并不好

• 响应式方面 性能得到很大提升 不用初始化的时候就递归遍历属性

• 响应式不区分数组和对象

• 3.0兼容IE12以上

• composition api 可以和 options API 同时存在

作者：前端大镖客_
链接：https://www.jianshu.com/p/deec63c85360
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

$: Object
$attrs: Proxy
$data: Proxy
$el: div.hello
$emit: ƒ ()
$forceUpdate: () => queueJob(i.update)
$nextTick: ƒ nextTick(fn)
$options: Object
$parent: Proxy
$props: Proxy
$refs: Object
$root: Proxy
$slots: Proxy
$watch

provide/inject

在这个版本上提供了依赖注入，在上级组件provide 提供注入选项，在需要注入变量的组件inject 注入。话不多说上代码。

const app = Vue.createApp({})

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- rest of the template -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > Injected property: John Doe
  }
})

Async Components

在大型应用程序中，我们可能需要将应用程序分成更小的块，并且只在需要时从服务器加载组件。为了实现这一点，Vue有一个defineAsyncComponent

const app = Vue.createApp({})

const AsyncComp = Vue.defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<div>I am async!</div>'
      })
    })
)

app.component('async-example', AsyncComp)

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})

teleport

当使用初始HTML结构内该组件，我们可以看到一个问题-模态正在呈现内的深度嵌套div和position: absolute模态的花费相对定位父div作为参考。
Teleport提供了一种干净的方法，使我们可以控制要在DOM中哪个父对象下呈现HTML，而不必求助于全局状态或将其拆分为两个部分。

app.component('modal-button', {
  template: `
    <button @click="modalOpen = true">
        Open full screen modal! (With teleport!)
    </button>

    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          I'm a teleported modal! 
          (My parent is "body")
          <button @click="modalOpen = false">
            Close
          </button>
        </div>
      </div>
    </teleport>
  `,
  data() {
    return { 
      modalOpen: false
    }
  }
})

Reactive

Reactive 提供了一个proxy 对象
定义 Reactive state

// 1. 返回的proxy
import { reactive } from 'vue'

// reactive state
const state = reactive({
  count: 0
})
// 2.返回RefImpl
import { ref } from 'vue'

const count = ref(0)

// 3.例子
<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">Increment count</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      return {
        count
      }
    }
  }
</script>
// 4.readonly  可以设置响应式数据只读

import { reactive, readonly } from 'vue'

const original = reactive({ count: 0 })

const copy = readonly(original)

// mutating original will trigger watchers relying on the copy
original.count++

// mutating the copy will fail and result in a warning
copy.count++ // 只读 warning: "Set operation on key 'count' failed: target is readonly."

toRef

为 reactive 对象的属性创建一个 ref

setup() {
  const user = reactive({ age: 1 });
  const age = toRef(user, "age");

  age.value++;
  console.log(user.age); // 2

  user.age++;
  console.log(age.value); // 3
}

toRefs - 解构响应式对象数据

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。
当想要从一个组合逻辑函数中返回响应式对象时，用 toRefs 是很有效的，该 API 让消费组件可以 解构 / 扩展（使用 … 操作符）返回的对象，并不会丢失响应性：

### setup
> 替代created

生命周期
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020102210241089.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu,size_16,color_FFFFFF,t_70#pic_center)

//todo

## [边缘处理](https://v3.vuejs.org/guide/component-edge-cases.html#forcing-an-update)
1.强制更新 $forceUpdate。
2.静态缓存 v-once
> 在Vue中，呈现纯HTML元素的速度非常快，但是有时您可能会拥有一个包含大量静态内容的组件。在这些情况下，可以通过将v-once指令添加到根元素来确保仅对它求值一次，然后对其进行缓存，如下所示：
```javascript
app.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})