尝鲜vue3.0-了解变化(2)

背景

经过上一篇文章尝鲜vue3.0-从ToDoList开始的介绍,大家可以初步了解一下vue3.0的简单写法。接下来,我描述一下尤大总结的总体变化,以及目前成熟的rfcs(语法变化)。


总体变化

  • Performance(性能)

    1. 重写vdom,提升了静态标记性能
    2. 编译时优化
    3. 更好的初始化性能
    4. 更新更快
    5. ssr速度更快
  • Tree-shaking support(tree shaking支持,文件更小)
    组件不需要一个唯一的根节点
  • Composition API新语法(Vue Composition API
  • Fragment(碎片),Teleport(portal),Suspense(异步组件)(新组件方式)
  • Better Typescript support(更好的支持ts)
  • Custom Renderer API(自定义渲染器)

Active Rfcs

  1. slot语法变化

    • v-slot在单一指令语法中统一了卡槽和槽作用域。
    • v-slot简写为#,可以统一作用域槽和卡槽的使用。

  1. 删除了class component
  2. 删除了 filterinline template,取消v-on的keyCode(@keyup.enter
  3. directive

    //动态转入指令名称
    <div v-bind:[key]="value"></div>
    <div v-on:[event]="handler"></div>
    //
    import { h, resolveComponent, resolveDirective, withDirectives } from 'vue'
    export default {
      render() {
        const comp = resolveComponent('some-global-comp')
        const fooDir = resolveDirective('foo')
        const barDir = resolveDirective('bar')
        // <some-global-comp v-foo="x" v-bar="y" />
        return withDirectives(
          h(comp),
          [fooDir, this.x],
          [barDir, this.y]
        )
      }
    }
  4. 为了运行tree-shaking,将api通过全局的import导出

    //比如
    import {nextTick,h,} from 'vue'
  5. 删除 v-bind.sync,用v-model代替

    • 主要是考虑到v-bind.syncv-model作用相同,使用起来会造成混乱
    • 在vue3里面,将会检测 v-bind.sync然后报warning,并且使用新的迁移助手检测并自动修复100%使用v-bind和.sync的情况

  1. 函数式组件必须为函数

    • 删除 { functional: true }
    • 不再支持 <template functional>
    //与2.X相比
    //只使用props和slot(data和childre就没了)
    //使用的新的api inject代替injections
    //parent被删除,首选使用props 和 injections 
    //listeners 将包括在 attrs 属性中
     import { inject } from 'vue'
     import { demo } from './Demo'
    
     const FunctionalComp = (props, { slots, attrs, emit }) => {
       const demoCom = inject(demo)
       return h('div', `Using demo ${demoCom}`)
     }
    • 必须用defineAsyncComponent来创建异步组件
    import { defineAsyncComponent } from 'vue'
    const AsyncComp = defineAsyncComponent(() => import('./Foo.vue'))
    1. 全局api的改变

改变Vue行为的global API被移到由新的apicreateApp方法创建的应用实例中,他们的只作用于app实例中,不改变Vue行为的gloabl API通过import使用,见第5点

    1. render函数的变化
    • h 使用import从vue中引用,见第五点
    • render函数的传值,将和函数式组件保持一致,见第7点props, { slots, attrs, emit }
    • vNodes变成扁平化的数据结构
    export default {
     render() {
       return h(
         'div',
         //以前
         //{
          // domProps: { innerHTML: '' },
           //on: { click: foo },
           //key: 'foo',
           //class: ['foo', 'bar'],
           //style: { color: 'red' },
           //attrs: { id: 'foo' },
         //},
         // 扁平化的数据结构
         {
           innerHTML: '',
           id: 'app',
           onClick:clickFn,
           key: 'foo',
           class: ['foo', 'bar'],
           style: { color: 'red' }
         },
         [
           h('span', 'world')
         ]
       )
     }
    }
    1. Composition API

      目前变化的api,东西太多讲不完。大概就是上一遍新增的ref,reactive,watchEffect等api

    2. transition变化

      • 当从外部切换组件时,使用<transition>作为组件的根将不再触发转换
      • class变化

        • v-enter-from 替换 v-enter
        • v-leave-from 替换 v-leave
        • v-appear-from 替换 v-appear
    3. 删除$on, $off, $once

      在vue2.0里面,可以用声明式的$emit可触发父组件中的方法,但是也能使用命令式的$on, $off, $once也能实现。算是一种重载,也考虑到也没必要暴露组件实例

    4. 属性的强制行为

      • 删除枚举属性的内部概念,并将这些属性视为普通的非布尔属性。
      • 当值为布尔值时不再移除属性。相反,它被设置为attr="false"。若要删除该属性,请使用null或undefined。

        //vue2.0中原话
        //如果 isButtonDisabled 的值是 null、undefined 或 false,则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中
        <button v-bind:disabled="isButtonDisabled">Button</button>

    vue2.0 attribute地址

    1. 在单个文件组件的样式中提供自定义CSS扩展
    • 弃用 >>>/deep/

      //使用这种
      ::v-deep(.bar) {}
    • 新伪类作用域组件块的全局样式::v-global(.foo) {}
    • 当前,从父节点传入的插槽内容同时受到父节点和子节点的样式影响。无法显式的创建以slot内容为目标的样式,或者不影响slot内容的样式,vue3.0中增加::v-slotted()

      ::v-slotted(.foo) {}
    1. Teleport 传送门(具体见上一篇)
    2. 路由相关
      也新增了很多api,但是细节太多,后面再补一篇细节

    最后

    目前的改动简单的列举了一下,vue3.0改动很大,但是更多是整理简化api,增加更多开发者需要的api,内部语法调整,以及性能优化。还是尽量的贴合以前开发习惯,降低升级成本。所以大家不用担心,可以愉快的接受3.0

    喜欢的话,大佬们可以点赞收藏,后续再更新😄
    下一篇尝鲜vue3.0-tyepscript开发组件(3)


    vue3尝鲜之旅
    前端工程师

    前端工程师

    25 声望
    5 粉丝
    0 条评论
    推荐阅读
    【进阶篇】koa+Mysql的全栈之旅
    继续上一篇【easy篇】前端到全栈从这里开始完成对云服务器的初步了解,以及nginx的配置,接下来是MySQL安装,建表操作以及使用Node.js框架Koa进行简单的数据增删改查功能。过程比较长,但是按照下面步骤来就比较...

    阿秋_在路上阅读 3.8k

    从零搭建 Node.js 企业级 Web 服务器(零):静态服务
    过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

    乌柏木148阅读 12.2k评论 10

    JavaScript有用的代码片段和trick
    平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

    jenemy46阅读 5.9k评论 12

    从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
    总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

    乌柏木66阅读 6.1k评论 16

    再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
    「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

    libinfs39阅读 6.3k评论 12

    封面图
    从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
    分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

    乌柏木43阅读 7.3k评论 6

    CSS 绘制一只思否猫
    欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

    XboxYan43阅读 2.9k评论 14

    封面图

    前端工程师

    25 声望
    5 粉丝
    宣传栏