【Vue3 入门到实战】16. Vue3 非兼容性改变

目录

1. 全局 API 的变化

2. 模板指令的变化

2.1 组件v-model用法

2.2 template v-for用法 

 2.3 v-if 和v-for 优先级变化

2.4 v-bind="object" 顺序敏感

2.5 v-on:event.native 被移除

3. 组件的变化

3.1 功能组件只能使用普通函数创建

3.2 SFC弃用功能属性 

3.3 异步组件需要创建 defineAsyncComponent 方法 

3.4 组件事件使用 emits 选项

 4. 渲染函数的变化

 4.1 渲染函数Api变化

4.2  删除 $scopedSlots 属性，并通过 $slots 将所有槽作为函数公开

4.3  $listeners 被删除/合并到$attrs

4.4 $attrs包括class和style属性 

5. 总结

---

 Vue 3 引入了许多改进和新特性，但同时也带来了一些与 Vue 2 不兼容的变化。以下是 Vue 3 中一些重要的非兼容性改变(参考官网)。地址链接如下👇 👇 👇

Breaking Changes | Vue 3 Migration Guide

1. 全局 API 的变化

全局 API 转移到应用实例：

在 Vue 3 中，许多全局 API 和选项被转移到了应用实例上。例如Vue.component、Vue.directive等现在需要通过创建的应用实例来使用。这意味着一些在 Vue 2 中直接挂载到全局 Vue 对象上的功能，现在需要通过应用实例（即 app 实例）来调用。

Vue 2 中的全局 API 使用方式

在 Vue 2 中，你可以直接使用全局的 Vue 对象来注册组件、指令、混入（mixins）、过滤器等。例如：

import Vue from 'vue';
import App from './App.vue';// 注册全局组件
Vue.component('my-component', {template: '<div>这是一个全局组件</div>'
});// 注册全局指令
Vue.directive('focus', {inserted(el) {el.focus();}
});// 创建并挂载应用实例
new Vue({render: h => h(App)
}).$mount('#app');

Vue 3 中的变化 

在 Vue 3 中，这些全局 API 被移到了应用程序实例上，也就是说你需要先创建一个应用实例，然后在这个实例上调用相应的 API 方法。如下代码所示。

import { createApp } from 'vue';
import App from './App.vue';// 创建应用实例
const app = createApp(App);// 注册局部组件
app.component('my-component', {template: '<div>这是一个局部组件</div>'
});// 注册局部指令
app.directive('focus', {mounted(el) {el.focus();}
});// 挂载应用实例
app.mount('#app');

2. 模板指令的变化

2.1 组件v-model用法

Vue3重新设计了组件上的 v-model 用法，取代了 v-bind.sync。

在 Vue 3 中，v-model 的功能得到了扩展和改进，取代了 Vue 2 中的 .sync修饰符。这使得双向数据绑定更加灵活和直观。而且支持多个 v-model 绑定。还可以自定义事件名，默认是 update:modelValue，但可以通过 v-model:propertyName 自定义。

Vue2种 .sync 修饰符

<!-- 父组件 -->
<template><div><child-component :money.sync="money" /></div>
</template><script>
export default {data() {return {money: 100};}
};
</script><!-- 子组件 -->
<template><div><button @click="$emit('update:money', 150)">修改银子</button></div>
</template>

 Vue3种的 v-model

<!-- 父组件 -->
<template><div><child-component v-model:money="money" /></div>
</template><script setup>
import { ref } from 'vue';
const money = ref(100);
</script><!-- 子组件 -->
<template><div><button @click="$emit('update:money', 150)">修改银子</button></div>
</template>

2.2 template v-for用法 

在 Vue 3 中，<template v-for> 上的 :key 属性需要放在 <template> 标签上，而不是内部的每个元素上。这样可以确保每个节点都有唯一的键，并且避免重复键的问题。

Vue2示例

<template><ul><template v-for="item in items"><li :key="item.id">{{ item.name }}</li><li :key="item.id + '_edit'">编辑 {{ item.name }}</li></template></ul>
</template>

 Vue3示例

<template><ul><template v-for="item in items" :key="item.id"><li>{{ item.name }}</li><li>编辑 {{ item.name }}</li></template></ul>
</template>

 2.3 v-if 和v-for 优先级变化

在 Vue 3 中，当 v-if 和 v-for 同时出现在一个元素上时，v-for 的优先级高于 v-if。而在 Vue 2 中，v-if 的优先级更高。

v-for 的优先级更高，这意味着它会先执行循环，然后对每个元素应用 v-if。

Vue2示例

<ul><li v-for="item in items" v-if="item.isVisible" :key="item.id">{{ item.name }}</li>
</ul>

Vue3示例 

<ul><li v-for="item in items" :key="item.id" v-if="item.isVisible">{{ item.name }}</li>
</ul>

2.4 v-bind="object" 顺序敏感

在 Vue 3 中，v-bind="object" 是顺序敏感的，这意味着对象中的属性顺序会影响最终的结果。如果对象中有相同的属性（例如多次绑定 class），后面的值会覆盖前面的值。因此，你需要确保对象中的属性顺序符合预期。

2.5 v-on:event.native 被移除

在 Vue 3 中，v-on:event.native 修饰符被移除。这是因为自定义组件现在默认监听原生事件，不再需要 .native 修饰符。

Vue2示例

<template><custom-component @click.native="handleClick"></custom-component>
</template>

Vue3示例 

<template><custom-component @click="handleClick"></custom-component>
</template>

3. 组件的变化

3.1 功能组件只能使用普通函数创建

在 Vue 3 中，功能组件（Functional Components）的概念有所变化。Vue 2 中的功能组件可以通过 functional: true 选项来定义，而在 Vue 3 中，功能组件只能通过普通的函数来创建。

也就是在 Vue 3 中，功能组件不再支持 functional: true 选项，功能组件必须通过返回渲染函数（如 h 函数）的方式实现。

Vue2示例

<template functional><div>{{ props.message }}</div>
</template><script>
export default {functional: true,props: {message: String}
};
</script>

Vue3示例 

在 Vue 3 中，功能组件需要使用 defineComponent 和普通函数来定义：

import { defineComponent, h } from 'vue';const FunctionalComponent = defineComponent({props: {message: String},setup(props) {return () => h('div', props.message);}
});

3.2 SFC弃用功能属性 

在 Vue 3 中，单文件组件（SFC）中的 <template> 标签不再支持 functional 属性。这意味着你不能像在 Vue 2 中那样直接在 <template> 标签上添加 functional 属性来定义功能组件。

Vue2示例

<template functional><div>{{ props.message }}</div>
</template><script>
export default {props: {message: String}
};
</script>

Vue3示例 

在 Vue 3 中，你需要将功能组件逻辑移到 setup 函数中，并且不能再在 <template> 标签上使用 functional 属性。

<template><div>{{ message }}</div>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps({message: String
});
</script>

3.3 异步组件需要创建 defineAsyncComponent 方法 

在 Vue 3 中，异步组件的创建方式发生了变化。你需要使用 defineAsyncComponent 方法来定义异步组件，而不是像 Vue 2 中那样直接返回一个 Promise。

Vue2示例

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

Vue3示例 

import { defineAsyncComponent } from 'vue';const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

种方式提供了更多的配置选项，比如加载状态、错误处理等。如：

const AsyncComponent = defineAsyncComponent({loader: () => import('./AsyncComponent.vue'),loadingComponent: LoadingComponent,errorComponent: ErrorComponent,delay: 200,timeout: 3000
});

3.4 组件事件使用 emits 选项

在 Vue 3 中，组件事件的声明更加明确，推荐使用 emits 选项来显式声明组件可以触发的事件。这有助于提高代码的可读性和维护性。

Vue2示例

<template><button @click="handleClick">点击我</button>
</template><script>
export default {methods: {handleClick() {this.$emit('custom-event', 'some data');}}
};
</script>

Vue3示例 

<template><button @click="handleClick">点击我</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['custom-event']);function handleClick() {emit('custom-event', 'some data');
}
</script>

 4. 渲染函数的变化

 4.1 渲染函数Api变化

只要是h 函数签名的变化，Vue 3 中的 h 函数参数顺序更加清晰。
Vue2示例 

h(tag, [data], [children])

Vue3示例 

import { h } from 'vue';h('div', { class: 'container' }, [h('span', 'Hello, world!')
]);

4.2  删除 $scopedSlots 属性，并通过 $slots 将所有槽作为函数公开

在 Vue 2 中，作用域插槽（Scoped Slots）是通过 $scopedSlots 访问的。而在 Vue 3 中，所有的插槽都通过 $slots 访问，并且默认都是函数形式。

Vue2示例

<template><child-component v-slot:default="slotProps">{{ slotProps.text }}</child-component>
</template><script>
export default {methods: {render() {return this.$scopedSlots.default({text: 'Hello from scoped slot'});}}
};
</script>

Vue3示例 

在 Vue 3 中，你可以直接通过 $slots 访问所有插槽，并且它们默认都是函数形式。插槽默认是函数形式，不再需要区分 $scopedSlots 和普通插槽。

import { h } from 'vue';export default {setup(props, { slots }) {return () => h('div', slots.default ? slots.default({ text: 'Hello from scoped slot' }) : '');}
};

4.3  $listeners 被删除/合并到$attrs

在 Vue 2 中，$listeners 是一个包含所有非原生事件监听器的对象。而在 Vue 3 中，$listeners 被移除，其功能被合并到了 $attrs 中。

Vue示例

<template><child-component @custom-event="handleCustomEvent" />
</template><script>
export default {methods: {handleCustomEvent() {console.log('Custom event triggered');}},mounted() {console.log(this.$listeners); // 包含所有自定义事件监听器}
};
</script>

Vue3示例 

在 Vue 3 中，自定义事件监听器现在也包含在 $attrs 中。

<template><child-component v-bind="$attrs" />
</template><script setup>
import { useAttrs } from 'vue';const attrs = useAttrs();console.log(attrs); // 包含所有自定义事件监听器和其他属性
</script>

4.4 $attrs包括class和style属性 

在 Vue 3 中，$attrs 不仅包含自定义属性，还包括 class 和 style 属性。这使得 $attrs 更加全面，可以处理更多的属性传递。

Vue2示例

<template><child-component class="custom-class" style="color: red;" />
</template><script>
export default {mounted() {console.log(this.$attrs); // 不包括 class 和 style}
};
</script>

Vue3示例 

<template><child-component v-bind="$attrs" />
</template><script setup>
import { useAttrs } from 'vue';const attrs = useAttrs();console.log(attrs); // 包括 class 和 style
</script>

5. 总结

 更多详细内容参考👇 👇 👇

Breaking Changes | Vue 3 Migration Guide

更多相关内容👇 👇 👇

Vue3入门到实战_借来一夜星光的博客-CSDN博客