Vue3新增API

你的名字 2022-12-11 01:29 73阅读 0赞

## 对比 ##

**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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70_pic_center]

### 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 }}  </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>
      `
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4c80d9bb65fa435e94c3c569fd5cb3bc.png