vue3与vue2的区别

 

目录

data的区别 

钩子函数

this的区别

scss用法区别

slot插槽的使用 

---

• data的区别 

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

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

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

<!-- Object 声明 -->
<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>

<!-- Function 声明 -->
<script>
  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  })
</script>

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

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

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>

推荐使用

• 钩子函数

 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(<inner-selector>) 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在两个特殊属性似乎没有必要，这将是很好的统一语法的单个构建下也是如此（统一插槽属性，便于学习）

 在子组件中：

<template>
  <div>
    <div>这是一个组件就哈哈哈哈</div>
    <!-- 不具名插槽的使用 -->
    <div>
      <slot>这是原来的插槽呀1</slot>
    </div>
    <!-- 具名插槽的使用 -->
    <div>
      <slot name="myslot">这是原来的插槽呀2</slot>
    </div>
    <!-- 具名插槽缩写： -->
    <div>
      <slot name="myslotsx">这是原来的插槽呀3</slot>
    </div>
    <!-- 父级组件决定插槽内容的渲染方式 -->
    <div>
      <slot name="header" age="18">这是原来的插槽呀4hhhhhh</slot>
    </div>
    <div>
      <slot name="footer" :list="list">这是原来的插槽呀5</slot>
    </div>
  </div>
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from "vue";
export default defineComponent({
  name: "myComponent",
  components: {},

  setup() {
    const state = reactive({
      list: [
        { name: "桃子", price: 5 },
        { name: "苹果", price: 8 },
        { name: "梨", price: 9 },
      ],
    });
    // 页面加载时
    onMounted(() => {});

    return {
      ...toRefs(state),
    };
  },
});
</script>
 

父组件中

 <my-component>
      <!-- 不具名插槽的使用 -->
      <template v-slot> 不具名插槽的使用</template>
      <!-- 具名插槽的使用 -->
      <template v-slot:myslot>具名插槽的使用 </template>
      <!-- 具名插槽缩写：#vslot -->
      <template #myslotsx>具名插槽缩写：#vslot</template>
      <!-- 父级组件决定插槽内容的渲染方式 -->
      <template #footer="slotData">
        <div v-for="(item, index) in slotData.list" :key="index">
          {{ item.name }}的价格时{{ item.price }}
        </div>
      </template>
    </my-component>

页面显示：

 

参考文章：

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

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

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