vue2.x 和 vue3.x的区别

1. 组件中可以不需要有一个根标签包裹了。Fragments，模板里面不用创建唯一根节点，可以直接放同级标签和文本内容。

2. 取消了全局事件总线。在Vue3中，从实例中完全移除了 $on、$off 和 $once 方法。$emit 仍然包含于现有的 API 中。

3. 取消了项目中的生产提示 ：Vue.config.productionTip = false

4. 移除了过滤器，官网的说法是，过滤器有学习成本，可以使用方法或者计算属性来代替。

5. 删除了在组件上使用原生的事件时，需要加上.native的做法。

6. 移除了键盘事件中的用KeyCode码来代替键盘上的键名的做法，原因是因为数字语义不够明确。

   <input type="text" placeholder="按回车键提示" @keyup.13="getInfo">
   

7. v-if 和 v-for 同时存在于一个标签内，执行顺序对调了。vue2 是先执行的 v-for 再执行 v-if，vue3 是先执行 v-if，再执行 v-for。

8. 生命周期中的beforDestroy 和 destroyed 改为了 beforeUnmount 和 unmounted

9. 具名插槽中的slot=“abc” 不生效了。要使用v-slot:abc

10. router-link 中的tag属性取消了。tag属性是用来渲染标签的，如：tag="span" ，那么router-link最终渲染为 span 标签。

11. css属性的值，可以使用v-bind写成一个变量

    <script setup>
    	const boxWidth = "100px";
    </script>
    
    <style lang="scss">
    .box {
      width: v-bind(boxWidth);
      height: 100px;
      background-color: red;
    }
    </style>
    

12. 深层样式穿透，vue2中使用/deep/(scss中的用法，vue3中不能使用，会报错) >>>(原生css中的用法)，现在使用

    <style lang="scss" scoped>
        .el-button::v-deep{
             span{
                    padding:20px;
             }
        }
     
        /deep/.el-button{
             span{
                    padding:20px;
             }
        }
    </style>
    
    <style scoped>
        >>>.el-carousel__button{
            width:10px;
            height:10px;
            background:red;
            border-radius:50%;
          }
    </stylet>
    

    ::v-deep 第三方组件类名{
          样式
    }
    ::v-deep .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
    
    或者使用
    :deep(.el-form-item) {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
    

    总结：

    1. 操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/
    2. vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep
    3. 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用

13. $listeners在vue3中使用

    • vue2中使用$attrs从父组件传递数据给子组件嵌套组件，父组件通过$listeners监听子组件的事件
    • vue3中把$attrs和$listeners统一合并到$attrs中

    vue2：

    <template>
      <label>
        <input type="text" v-bind="$attrs" v-on="$listeners" />
      </label>
    </template>
    <script>
      export default {
        inheritAttrs: false
      }
    </script>
    

    vue3:

    <template>
      <label>
        <input type="text" v-bind="$attrs" />
      </label>
    </template>
    <script>
    export default {
      inheritAttrs: false
    }
    </script>
    

    博客地址

14. 移除了$children，我们可以通过ref来获取子组件实例

15. vue2中默认插槽不用加上#default，vue3默认插槽需要加上#default才会生效

    // 父组件
    <A>
      <template #default> 我是默认插槽内容 </template>
    </A>
    
    // 子组件
    <div class="a">
      <div>我是A子组件</div>
      <slot></slot>
    </div>
    

未完待续…