Vue3新功能总结

总结一下vue3的新功能。

Composition API

• Vue2

  Options API ：逻辑相对分散，编写大型组件时，可读性较差。

// src/components/UserRepositories.vue

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { 
      type: String,
      required: true
    }
  },
  data () {
    return {
      repositories: [], // 1
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    getUserRepositories () {
      // 使用 `this.user` 获取用户仓库
    }, // 1
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

• Vue3

  Composition API：逻辑分明，可维护性高。

// src/components/UserRepositories.vue

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: {
      type: String,
      required: true
    }
  },
  setup(props) {
    console.log(props) // { user: '' }

    return {} // 这里返回的任何内容都可以用于组件的其余部分
  }
  // 组件的“其余部分”
}

重写双向数据绑定

• Vue2

  基于Object.defineProperty() 实现。

  缺点：

  1. 备份一份数据
  2. 使用for…in…循环每一个key
  3. 不可以监听数组的length变化及push等其他数组操作

• Vue3

  基于Proxy实现。

  优点：

  1. 可以监听数组变化
  2. 不需要备份数据
  3. 省去for…in…循环每一个key
  4. 代码更简化

VDOM性能瓶颈

• Vue2

  采用diff算法

  每次更新diff都是全量对比，diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记 录的消息去局部更新Dom。

• Vue3

  采用patch flag静态树

  每次更新只对比带有标记的，大大减少了非动态内容的对比消耗。

  点击 Vue Template Explorer 进行源码编译查看

Vue3 Fragment

• 支持多个根节点

<template>
	<div>test1</div>
	<div>test2</div>
</template>

• DOM中支持 render JSX 写法

render() {
        return (
            <>
                {this.visable ? (
                    <div>{this.obj.name}</div>
                ) : (
                    <div>{this.obj.price}</div>
                )}
                <input v-model={this.val}></input>
                {[1, 2, 3].map((v) => {
                   return <div>{v}-----</div>;
                })}
            </>
        );
    },
 

• 新增 suspense 和 多v-model 用法

  • suspense

  该 <suspense> 组件提供了另一个方案，允许将等待过程提升到组件树中处理，而不是在单个组件中。

  <template>
    <suspense>
      <template #default>
        <todo-list />
      </template>
      <template #fallback>
        <div>
          Loading...
        </div>
      </template>
    </suspense>
  </template>
  
  <script>
  export default {
    components: {
      TodoList: defineAsyncComponent(() => import('./TodoList.vue'))
    }
  }
  </script>

  • 多v-model绑定

  <user-name
    v-model:first-name="firstName"
    v-model:last-name="lastName"
  ></user-name>

Vue3 tree shaking

将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中。

比如你要用watch() 就需要 import { watch } from 'vue' 其他的computed() 没用到就不会给你打包减少体积