vue中mixin,vue.mixin
这篇文章主要介绍了某视频剪辑软件的混入类策略的相关资料，帮助大家更好的理解和学习某视频剪辑软件框架，感兴趣的朋友可以了解下
我之前一直以为混入类的合并是以组件内的优先，即混入类的内容如果和组件内有冲突的，以组件内为准，确实存在这种情况，但是某视频剪辑软件指定的策略更详细，下面分别记录各种情况对应的合并策略
基本
当一个组件使用混入类的时候，所有混入类的选项会被混入到组件自己的选项中，这部分没什么好说的，直接看代码
//定义混入类对象
const myMixin={
已创建(){
this.hello()
},
方法：{
你好(){
console.log(你好，来自“mixin！”)
}
}
}
//定义一个使用此混入类的应用程序
const app=Vue.createApp({
mixins:[我的Mixin]
})
app.mount(#mixins-basic) //=你好，来自“mixin！”
选项的合并策略
这里的选项指的就是数据方法和生命周期钩子函数这些选项，他们的会采取不同的合并策略
像数据、方法、组件、指令这样的会被合并进同一个对象中，并且遇到冲突项以组件的为准
const myMixin={
data() {
返回{
消息："你好",
foo:“ABC”
}
}
}
const app=Vue.createApp({
mixins: [myMixin]，
data() {
返回{
留言："再见",
栏："定义"
}
},
已创建(){
console.log(这个. $data) //={ message:再见，foo: abc ，bar: def }
}
})
const myMixin={
方法：{
foo() {
console.log(foo )
},
冲突(){
console.log(来自混合’)
}
}
}
const app=Vue.createApp({
mixins: [myMixin]，
方法：{
bar() {
console.log(bar )
},
冲突(){
console.log(来自自己)
}
}
})
const VM=app。挂载( # mixins-basic )
vm.foo() //=foo
vm.bar() //=bar
vm.conflicting() //=from self
而对于钩子函数就不是简单的替换了，如果有同名的，他们会被一起合并进数组中，然后依次调用，且混入类的钩子函数会率先被调用
const myMixin={
已创建(){
console.log(调用了混入类挂钩)
}
}
const app=Vue.createApp({
mixins: [myMixin]，
已创建(){
console.log("调用了组件挂钩")
}
})
//=调用了混入类挂钩
//=调用了组件挂钩
全局混入和自定义选项
const app=Vue.createApp({
我的选择："你好!"
})
//插入“我的选择”自定义选项的处理程序
app.mixin({
已创建(){
const myOption=this .$options.myOption
if (myOption) {
console.log(我的选项)
}
}
})
app。mount( # mixins-global )//= hello！
上述代码，我们在全局创建了一个自定义选项，然后进行了全局混入处理，但是需要注意的是，这会影响到这个应用所有的子组件：
const app=Vue.createApp({
我的选择："你好!"
})
//插入“我的选择”自定义选项的处理程序
app.mixin({
已创建(){
const myOption=this .$options.myOption
if (myOption) {
console.log(我的选项)
}
}
})
//将我的感觉也添加到子组件
app.component(测试组件,{
我的选项："组件您好!"
})
app。装载数(混合数-全局)
//=你好!
//=你好，来自组件!
我们可以看到，对于自定义选项这不是简单的替换，而是分别调用，当然我们也可以制定我们自己的合并策略：
const app=Vue.createApp({})
app。配置。选项合并策略。自定义选项=(to val，fromVal)={
//返回mergedVal
}
合并策略接收两个参数，分别是指定项在父实例和子实例的值，当使用混入类的时候我们可以查看打印什么：
const app=Vue.createApp({
顾客："你好!"
})
app。配置。选项合并策略。custom=(to val，fromVal)={
console.log(fromVal，toVal)
//=再见!,未定义
//=你好,再见!
从瓦尔返回到瓦尔
}
app.mixin({
顾客："再见!",
已创建(){
console.log(这个. $options.custom) //=你好!
}
})
可以看到第一次从混入类打印，然后从应用打印。
注意事项
Mixin容易引起冲突。您必须确保没有冲突的属性名称，以避免冲突，这将导致额外的负担。
复用性有限，因为mixin不能接受参数，所以写的逻辑不灵活。
所以官方推荐使用Composition Api来组织逻辑。
以上是Vue的mixin策略的详细内容。更多关于Vue的mixin策略，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。