Vue3自我理解及实战

微信扫一扫,分享到朋友圈

Vue3自我理解及实战

最近vue3如火如荼,尤雨溪也说差不多在8月会公布最新版,那就趁着这股浪潮,来学习学习下vue3吧~

一、Vue3的新特性及其理解

  • 首先要了解下Vue3的新特性啦,那就借尤雨溪介绍的Vue3的亮点,做一个简单的自我理解。

  • Vue3亮点有这些

  • 1、Performance 性能

    • (1)、Rewritten virtual dom implementation: 重写虚拟dom的实现。这个具体怎么表现呢?首先看编译模版的静态标记:
      • 【1】、 vue3 中动态属性会有第四个参数,代表是变化的,只有识别到这个才会被追踪,而静态属性不需要被遍历到,所以提高了性能。

      • 【2】、 vue2中静态属性和动态属性都用 _c 新建成 vdom , 所以在 diff 的时候都需要对比,就有额外的一些性能损耗。

      • 【3】、那第四个属性的数字代表什么呢?看下源代码

        export const enum PatchFlags {
        TEXT = 1,// 表示具有动态textContent的元素
        CLASS = 1 << 1,  // 表示有动态Class的元素
        STYLE = 1 << 2,  // 表示动态样式(静态如style="color: red",也会提升至动态)
        PROPS = 1 << 3,  // 表示具有非类/样式动态道具的元素。
        FULL_PROPS = 1 << 4,  // 表示带有动态键的道具的元素,与上面三种相斥
        HYDRATE_EVENTS = 1 << 5,  // 表示带有事件监听器的元素
        STABLE_FRAGMENT = 1 << 6,   // 表示其子顺序不变的片段。
        KEYED_FRAGMENT = 1 << 7, // 表示带有键控或部分键控子元素的片段。
        UNKEYED_FRAGMENT = 1 << 8, // 表示带有无key绑定的片段
        NEED_PATCH = 1 << 9,   // 表示只需要非属性补丁的元素,例如ref或hooks
        DYNAMIC_SLOTS = 1 << 10,  // 表示具有动态插槽的元素
        }
        复制代码

        这就明白了,代表着不同类型。同时如果两者都有的话,就会按位与运算进行整合,如下面源代码

        export const PLUGIN_EVENT_SYSTEM = 1;
        export const RESPONDER_EVENT_SYSTEM = 1 << 1;
        export const USE_EVENT_SYSTEM = 1 << 2;
        export const IS_TARGET_PHASE_ONLY = 1 << 3;
        export const IS_PASSIVE = 1 << 4;
        export const PASSIVE_NOT_SUPPORTED = 1 << 5;
        export const IS_REPLAYED = 1 << 6;
        export const IS_FIRST_ANCESTOR = 1 << 7;
        export const LEGACY_FB_SUPPORT = 1 << 8;
        复制代码
  • 2、Tree shaking

    • 按需导入的原则
  • 3、TypeScript support

    • 自动的类型定义提示。这个主要表现在使用defineComponent这个方法或其他方法的时候,会自动帮你提示有对应的方法
export default defineComponent({
render() {
}
})
复制代码
  • 4、Fragment
    • 这个的意思是,原先我们是在 template 中要用一个大的div包裹,现在不用了,可以多个div并列,这个我觉得挺好的,就是我们有很多组件的时候也可以多个组件并列放,不用一个大的div包裹。如下图从左->右的变化。
  • 5、Composition API(组合API)
    • 更好的逻辑复用与代码组织,有点类似于React Hook。在vue2及以前,是将方法分布到对应的方法中,在Composition API中就则可以让你将同个联系,共同方法组合起来。 之前是
  • 6、Custom Renderer API(自定义渲染器)
    • 这个api使得开发更加地灵活了。比如我就用api接口做了个canvas动画。 git地址 以下是自己写Render函数。
  • 7、接下来是vue3的API:
import {
createApp,  // 创建app
reactive,   // 接收一个普通对象 返回一个响应式数据对象
ref,        // 将给定的值(确切的说是基本数据类型 int 或 string)创建一个响应式的数据对象
toRefs,     // 可以将reactive创建出的对象展开为基础类型
isRef,      // 判断一下是不是ref生成的响应式数据对象
computed,   // 创建计算属性
watch,      // 定义监听器
onMounted,  // 挂载到dom之后
onUpdated,  // 更新之后
onUnmounted,// 销毁之后
effect      // 副作用函数,响应式对象修改会触发这个函数
computed    // 计算属性
} from 'vue'
复制代码
  • 8、生命周期的变化
Vue2 Vue3
beforeCreate setUp
created setUp
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
  • 9、vue-router/vuex使用的变化
createApp(App).use(router).use(store).mount('#app')
复制代码

二、Vue3实战

  • 使用vue3开发的飞机大战,实现自定义的Render API 飞机大战
  • 看vue3源码写的mini-vue3: mini-vue3

三、资料附录

微信扫一扫,分享到朋友圈

Vue3自我理解及实战

Vetur:现状,发展,赞助和方向

上一篇

好莱坞科幻电影《2067》曝预告 回到未来拯救人类

下一篇

你也可能喜欢

Vue3自我理解及实战

长按储存图像,分享给朋友