vue3与vue2的区别

 

目录

data的区别 

钩子函数

this的区别

scss用法区别

slot插槽的使用 

---

• data的区别 

• 非兼容：组件选项 data 的声明不再接收纯 JavaScript object，而是接收一个 function。

• 非兼容：当合并来自 mixin 或 extend 的多个 data 返回值时，合并操作现在是浅层次的而非深层次的 (只合并根级属性)。

在 2.x 中，开发者可以通过 object 或者是 function 定义 data 选项。

在 3.x 中，data 选项已标准化为只接受返回 object 的 function。

使用上面的示例，代码只可能有一种实现：

推荐使用

• 钩子函数

 vue3的钩子函数只能再setup中调用，components和watch除外

具体可参考：

vue3的生命周期函数_南桥几许的博客-CSDN博客

• this的区别

setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，因无法使用我们在 vue2.x 常用的 this。

vue3提供了getCurrentInstance ，通过这个属性，找到全局属性globalProperties

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const _this= instance.appContext.config.globalProperties

 

• scss用法区别

 vue3的深度选择器不再是：：v-deep而是：deep(.class)

按照vu2的写法会报错

::v-deep usage as a combinator has been deprecated. Use :deep() instead.

 原因新的vue3.0 单文件规范::v-deep写法已经被废弃了
修改成 如下写法，不要加空格

:deep(.el-divider) {
        margin: auto 16px;
        width: 1px;
        height: 10px;
        background: #cccccc;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        .el-divider--horizontal {
          border: none;
        }
      }

• slot插槽的使用 

vue 3.x 增加了v-slot的指令来代替原来2.6的slot，slot-scope属性

原因：这里引用了官方的说法，我们计划统一插槽类型，因此不再需要（从概念上）区分作用域插槽和非作用域插槽。一个插槽可能会或可能不会接收道具，但它们全都是插槽。有了这个概念上的统一，具有slot和slot-scope在两个特殊属性似乎没有必要，这将是很好的统一语法的单个构建下也是如此（统一插槽属性，便于学习）

 在子组件中：

父组件中

页面显示：

 

参考文章：

Vue的进化——Vue3与Vue2在应用中的区别 - MK24 - 博客园

vue3.x 插槽复习_爱生活，爱编程的博客-CSDN博客_vue3 插槽

vue 3.x 新指令 v-slot - 阴阳师先生 - 博客园