长安东莞网站设计,网站建设 企业,河南省建设厅专家库,y1s华硕wordpress目录
1. 全局 API 的变化
2. 模板指令的变化
2.1 组件v-model用法
2.2 template v-for用法 2.3 v-if 和v-for 优先级变化
2.4 v-bindobject 顺序敏感
2.5 v-on:event.native 被移除
3. 组件的变化
3.1 功能组件只能使用普通函数创建
3.2 SFC弃用功能属性…
目录
1. 全局 API 的变化
2. 模板指令的变化
2.1 组件v-model用法
2.2 template v-for用法 2.3 v-if 和v-for 优先级变化
2.4 v-bindobject 顺序敏感
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 修饰符
!-- 父组件 --
templatedivchild-component :money.syncmoney //div
/templatescript
export default {data() {return {money: 100};}
};
/script!-- 子组件 --
templatedivbutton click$emit(update:money, 150)修改银子/button/div
/template Vue3种的 v-model
!-- 父组件 --
templatedivchild-component v-model:moneymoney //div
/templatescript setup
import { ref } from vue;
const money ref(100);
/script!-- 子组件 --
templatedivbutton click$emit(update:money, 150)修改银子/button/div
/template
2.2 template v-for用法
在 Vue 3 中template v-for 上的 :key 属性需要放在 template 标签上而不是内部的每个元素上。这样可以确保每个节点都有唯一的键并且避免重复键的问题。
Vue2示例
templateultemplate v-foritem in itemsli :keyitem.id{{ item.name }}/lili :keyitem.id _edit编辑 {{ item.name }}/li/template/ul
/template Vue3示例
templateultemplate v-foritem in items :keyitem.idli{{ item.name }}/lili编辑 {{ 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示例
ulli v-foritem in items v-ifitem.isVisible :keyitem.id{{ item.name }}/li
/ul
Vue3示例
ulli v-foritem in items :keyitem.id v-ifitem.isVisible{{ item.name }}/li
/ul
2.4 v-bindobject 顺序敏感
在 Vue 3 中v-bindobject 是顺序敏感的这意味着对象中的属性顺序会影响最终的结果。如果对象中有相同的属性例如多次绑定 class后面的值会覆盖前面的值。因此你需要确保对象中的属性顺序符合预期。 2.5 v-on:event.native 被移除
在 Vue 3 中v-on:event.native 修饰符被移除。这是因为自定义组件现在默认监听原生事件不再需要 .native 修饰符。
Vue2示例
templatecustom-component click.nativehandleClick/custom-component
/template
Vue3示例
templatecustom-component clickhandleClick/custom-component
/template 3. 组件的变化
3.1 功能组件只能使用普通函数创建
在 Vue 3 中功能组件Functional Components的概念有所变化。Vue 2 中的功能组件可以通过 functional: true 选项来定义而在 Vue 3 中功能组件只能通过普通的函数来创建。
也就是在 Vue 3 中功能组件不再支持 functional: true 选项功能组件必须通过返回渲染函数如 h 函数的方式实现。
Vue2示例
template functionaldiv{{ props.message }}/div
/templatescript
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 functionaldiv{{ props.message }}/div
/templatescript
export default {props: {message: String}
};
/script
Vue3示例
在 Vue 3 中你需要将功能组件逻辑移到 setup 函数中并且不能再在 template 标签上使用 functional 属性。
templatediv{{ message }}/div
/templatescript 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示例
templatebutton clickhandleClick点击我/button
/templatescript
export default {methods: {handleClick() {this.$emit(custom-event, some data);}}
};
/script
Vue3示例
templatebutton clickhandleClick点击我/button
/templatescript 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示例
templatechild-component v-slot:defaultslotProps{{ slotProps.text }}/child-component
/templatescript
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示例
templatechild-component custom-eventhandleCustomEvent /
/templatescript
export default {methods: {handleCustomEvent() {console.log(Custom event triggered);}},mounted() {console.log(this.$listeners); // 包含所有自定义事件监听器}
};
/script
Vue3示例
在 Vue 3 中自定义事件监听器现在也包含在 $attrs 中。
templatechild-component v-bind$attrs /
/templatescript setup
import { useAttrs } from vue;const attrs useAttrs();console.log(attrs); // 包含所有自定义事件监听器和其他属性
/script
4.4 $attrs包括class和style属性
在 Vue 3 中$attrs 不仅包含自定义属性还包括 class 和 style 属性。这使得 $attrs 更加全面可以处理更多的属性传递。
Vue2示例
templatechild-component classcustom-class stylecolor: red; /
/templatescript
export default {mounted() {console.log(this.$attrs); // 不包括 class 和 style}
};
/script
Vue3示例
templatechild-component v-bind$attrs /
/templatescript setup
import { useAttrs } from vue;const attrs useAttrs();console.log(attrs); // 包括 class 和 style
/script 5. 总结 更多详细内容参考
Breaking Changes | Vue 3 Migration Guide
更多相关内容
Vue3入门到实战_借来一夜星光的博客-CSDN博客
