define函数用法

1. props 在 Vue2 中 vs defineProps 在 Vue3 中

Vue2：props

在Vue2中，props用于从父组件传递数据到子组件。你可以在props选项中定义属性，并在模板中直接使用。

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  // 定义接收的 props
  props: {
    title: {
      type: String,
      required: true
    }
  }
};
</script>

Vue3：defineProps

在Vue3中，defineProps在<script setup>中使用，直接定义和访问组件的props。

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script setup>
// 通过 defineProps 定义和获取 props
const props = defineProps({
  title: {
    type: String,
    required: true
  }
});
</script>

解释：

• 在Vue2中，props是在组件选项中定义的。
• 在Vue3中，defineProps在<script setup>中使用，提供了一种更简洁的方式来定义和使用props。

---

2. emit 在 Vue2 中 vs defineEmits 在 Vue3 中

Vue2：emit

在Vue2中，$emit用于在子组件中触发事件，并可以通过事件名称传递数据。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 触发事件，传递数据
      this.$emit('myEvent', 'Hello from child');
    }
  }
};
</script>

Vue3：defineEmits

在Vue3中，defineEmits用于声明可以触发的事件，并通过emit函数触发这些事件。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
// 定义组件的事件
const emit = defineEmits(['myEvent']);

function handleClick() {
  // 触发事件，传递数据
  emit('myEvent', 'Hello from child');
}
</script>

解释：

• 在Vue2中，使用this.$emit触发事件。
• 在Vue3中，使用defineEmits声明事件，并使用emit函数触发这些事件。

---

3. expose 在 Vue2 中 vs defineExpose 在 Vue3 中

Vue2：公开方法或属性

在Vue2中，如果你想让父组件访问子组件的方法或属性，你可以通过ref在父组件中直接访问子组件实例，并调用其方法。

子组件：

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

父组件：

<template>
  <ChildComponent ref="childComp" />
  <button @click="incrementChild">Increment Child</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    incrementChild() {
      this.$refs.childComp.increment();
    }
  }
};
</script>

Vue3：defineExpose

在Vue3中，通过defineExpose显式地暴露子组件内部的状态或方法，供父组件使用。

子组件：

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref, defineExpose } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

// 显式暴露 count 和 increment 方法
defineExpose({
  count,
  increment
});
</script>

父组件：

<template>
  <ChildComponent ref="childComp" />
  <button @click="incrementChild">Increment Child</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 访问子组件的暴露方法
const childComp = ref(null);

function incrementChild() {
  childComp.value.increment();
}
</script>

解释：

• 在Vue2中，通过$refs可以访问子组件实例，并调用其方法。
• 在Vue3中，通过defineExpose显式暴露方法或属性，使父组件可以通过ref访问和调用。

---

4. 异步组件：Vue2 的 Vue.component vs Vue3 的 defineAsyncComponent

Vue2：异步组件

在Vue2中，可以通过Vue.component注册异步组件，这些组件会在需要时加载。

Vue.component('AsyncComponent', function (resolve) {
  // 通过 resolve 函数异步加载组件
  require(['./components/HeavyComponent.vue'], resolve);
});

或者通过import语法：

Vue.component('AsyncComponent', () => import('./components/HeavyComponent.vue'));

Vue3：defineAsyncComponent

在Vue3中，使用defineAsyncComponent来定义异步组件，组件会在首次使用时加载。

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/HeavyComponent.vue')
);

export default {
  components: {
    AsyncComponent
  }
};

解释：

• 在Vue2中，异步组件通过Vue.component进行注册，并使用回调或import进行异步加载。
• 在Vue3中，使用defineAsyncComponent可以更简洁地定义异步组件，并支持更强大的功能（如超时处理、加载状态等）。

---

5. Web 组件：Vue2 中使用 Vue.customElement vs Vue3 的 defineCustomElement

Vue2：使用 vue-custom-element 插件

在Vue2中，如果想将Vue组件作为原生Web组件（Custom Element）使用，通常会借助vue-custom-element插件。

import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import MyComponent from './MyComponent.vue';

Vue.use(vueCustomElement);

// 将 Vue 组件注册为 Custom Element
Vue.customElement('my-custom-element', MyComponent);

Vue3：defineCustomElement

在Vue3中，defineCustomElement原生支持将Vue组件定义为Web组件。

import { defineCustomElement } from 'vue';
import MyComponent from './MyComponent.vue';

// 将 Vue 组件注册为 Custom Element
const MyCustomElement = defineCustomElement(MyComponent);

customElements.define('my-custom-element', MyCustomElement);

解释：

• 在Vue2中，通常需要使用第三方插件（如vue-custom-element）来将Vue组件转换为Web组件。
• 在Vue3中，defineCustomElement函数提供了内置支持，将Vue组件注册为Web组件，无需外部插件。