vue3

vue3.x新变化

1. 传送门Teleport

标签Teleport可以通过to属性指定当前子元素渲染时的父级元素

2. 多个根标签
3. 全局api改为实例方法

vue2.x中没有app的概念，new Vue（）的根被作为app，共享全局配置，也导致没有办法在单页面创建不同全局配置的app实例

4. v-model使用的变化（.sync的移除）

在父组件中使用v-model绑定值，子组件中使用props默认值modelValue接受，并可以通过emit（‘update：modelValue’，）

如果想更改默认值，需要使用v-model：xx=“yyy”；

5. vue-router

6. 数据劫持由Object.defineProperty换为Proxy

7. composition API

   • setup

     • 所有的组合API都在此使用
     • 函数需要返回对象，返回的值可以在模板中直接使用
     • setup的参数：setup（props，context），context可以解构为

   • ref

     用于定义基本数据类型的响应式数据

   • reactive

     用于定义对象类型的响应式数据

   • watch

     使用方法：https://zhuanlan.zhihu.com/p/465651353

   • computed

   • 生命周期

       setup() {
         
         const msg = ref('abc')
     
         const update = () => {
           msg.value += '--'
         }
     
         onBeforeMount(() => {
           console.log('--onBeforeMount')
         })
     
         onMounted(() => {
           console.log('--onMounted')
         })
     
         onBeforeUpdate(() => {
           console.log('--onBeforeUpdate')
         })
     
         onUpdated(() => {
           console.log('--onUpdated')
         })
     
         onBeforeUnmount(() => {
           console.log('--onBeforeUnmount')
         })
     
         onUnmounted(() => {
           console.log('--onUnmounted')
         })
         
         return {
           msg,
           update
         }
       }
     

   • 自定义hook函数

     类似于vue2.x的mixin，可以建立单独的js文件，将需要实现的功能写在里面；在js中也可以使用composition API

   • toRefs

     解决reactive解构以后的属性都是非响应式的；

     使用方法：

         const state = reactive({
           foo: 'a',
           bar: 'b',
         })
     
         const stateAsRefs = toRefs(state)
     

8. 按需引入

   各个原先直接可以用的api，现在都变为了按需引入

vue3是如何变快的

1. diff算法优化

   第一次生成虚拟DOM时，会给可变节点添加flag标记，当第二次生成虚拟dom时，只比较有flag标记的

2. 静态提升

   vue2中元素无论是否参与更新都会重新创建，vue3中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时复用。

3. 事件监听器缓存

   会对事件函数进行缓存复用。