当前位置: 首页 > 工具软件 > Vtip-Vue > 使用案例 >

Vue3.0 And Vite

司徒元明
2023-12-01

2020…18 发布Vue3正式发布Vue3.0.0

Vue3.0 新东西

性能提升 1.3~2x,与Vue2.x 相比,mount 提升50%,内存占用小120%
核心代码+Composition API : 13.5kb,最小11.75kb
所有Runtime:22.5kb(Vue2是32kb)
TS支持,新增:Fragment、Teleport、Suspense
按需加载(配合vite) & 组合API

  • Compiler 原理篇
    尝试地址:https://vue-next-template-explorer.netlify.app
    • 优化案例1
      • 静态Node不再作更新处理(hoistStatic -> SSR优化)
      • 静态绑定的class,id不再作更新处理
      • 结合打包标记PatchFlag,进行更新分析(动态绑定)
    • 优化案例2
      • 事件监听器Cache缓存处理(cacheHandlers)
      • hoistStatic自动针对多静态节点进行优化,输出字符串
  • 新增功能
    • Fragment —— 不受根节点限制,渲染函数可接收Array
    • Teleport —— 类似Portal,随用随取,e.g.弹窗,Actions
    • Suspense —— 嵌套的异步依赖,e.g.async setup()

Vue3 CompositonAPI (组合API)

  • 优点 代码集中化、逻辑高复用
  • 为什么要用Composition API
  • Vue2对于复杂逻辑组件,在后期变得无法维护
  • Vue2中代码复用方法,如:Mixin,Filters都有缺陷
  • Vue2对TS支持不充分
  • Options API(选项式API)
  • 坏处:代码碎片化、逻辑不复用
  • Vue2 逻辑服用方式
    • Mixin(命名空间冲突、逻辑不清晰、不易复用)
    • scoped slot 作用域插槽(配置项多、代码分裂、性能差)
Compiler原理

优化1

  • 静态Node不再做更新处理(hoistStatic -> SSR优化)
  • 静态绑定的class、id不再做更新处理
  • 结合打包标记PatchFlag,进行更新分析(动态绑定)
    优化2
  • 事件监听器Cache缓存处理(cacheHandlers)
  • hoistStatic自动针对多静态节点进行优化,输出字符串

vue3 编译

Vue3 带来的变化
  • 性能提升 1.3~2x
  • TS支持,新增:Fragment、Teleprot、Suspense
    • Fragment — 不受根节点限制,渲染函数可接受Array
    • Teleprot — 类似Protal,随用随取。e.g. 弹窗,Actions
    • Suspense ---- 嵌套的异步以来,e.g. async setup()
  • 按需加载(配合Vite) & 组合API
补充说明-全家桶

vue3 watch & watchEffect 区别

  • watch 相当于vue2 的watch 监听具体的某一个变量的变化
  • watchEffect 监听这个函数里面相关变量的变化
组合式API+setup入口

组合式API主要是为提取可重用的代码段,提高应用的可维护性和灵活性,而setup函数是组合式API的入口

  • setup调用发生在组件创建之前,props解析完成之后,无法直接使用this
  • setup选项是一个接受props和context 的函数,setup 返回的所有内容都暴露给组件的其余部分(计算属性、方法、生命周期钩子等等)以及组件的模板
  • setup组册生命周期钩子,组合式API上的生命周期钩子与选项式API的名称相同,但是前缀为on:即mounted 变成 onMounted
ref、reactive、toRef、toRefs、unref 区别
  • ref 和 reactive 都是用来定义响应式数据的,ref更推荐定义基础数据类型,reactive 更推荐定义复杂类型
  • ref 定义的数据,访问是需要多一个。value
const count = ref(0)
const state = reactive({
  foo: 1,
  bar: 2
})
count.value++
state.foo++
console.log(count.value) // 1
console.log(state.foo) // 2
  • toRefs 与 unref 都是将响应式对象转成普通对象(解构),toRefs针对的是复杂对象,unref针对基础数据类型
  • roRefs解构完成对象的属性还具有响应式,对象的属性是ref,而unref解构后就不具有响应性
const count = ref(0)
const state = reactive({
  foo: 1,
  bar: 2
})
console.log(unref(count)); // 输出0
const state1 = toRefs(state);
const showFoo = state1.foo; // showFoo是ref对象
showFoo.value++
console.log(state1); //输出state对象
  • toRef为源响应式对象上的某个property新创建一个ref
const state = reactive({
  foo: 1,
  bar: 2
})
const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3

详情查看官网:https://v3.cn.vuejs.org/api/refs-api.html

 类似资料:

相关阅读

相关文章

相关问答