关闭

vue3.0 mixin 混入

时间: 2020-12-01阅读: 55标签: vue3

首先是官方定义:混入 (mixin) 提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

通俗来讲,就是 mixin 中的属性,比如 data、methods 或者自定义属性,将被混入到全部或者指定的组件中,让这些组件可以调用 mixin 中所定义的属性或者事件


全局 mixin

首先,我们直接定义全局的 mixin

// 定义全局 mixin
app.mixin({
  message: 'mixin',
  data() {
    return {
      count: 100,
    };
  },
});


混入 data

全局mixin默认会混入所有组件中,接下来,我们再定义一个组件,模板中插入 message 字段,如下所示:

const app = Vue.createApp({
  template: `
    <div>{{message}}</div>
  `,
}); 

此时mixin中的data属性将会混入到组件中,虽然组件的 data 中并没有包含 message 字段,但是在运行的页面中依然显示出 message 的值 mixin message。现在,我们在组件内部的 data 中也添加 message 字段。

const app = Vue.createApp({
  data() {
    return {
      message:'app message'
    }
  }
  ...
}); 

这时候,运行页面,模板中的内容将显示组件中 data 里的值 app message,这说明,组件内部 data 的优先级是高于 mixin 内部 data 的优先级的。


混入事件(methods)

同样的,我们也可以一下测试事件的优先级

const app = Vue.createApp({
  ...
  methods: {
    handleClick() {
      console.log('app click');
    }
  },
  // 这里点击元素,会打印出 "app click"
  template: "<div @click="handleClick">{{message}}</div>"
}); 
// 定义全局 mixin
app.mixin({
  ...
  methods: {
    handleClick() {
      console.log('mixin click');
    }
  }
});

点击div,将会打印出 app click ,这说明当 mixin 中和组件中都存在 handleClick 事件时,组件中同名事件优先级会比较高。


混入生命周期函数(created、mounted 等)

下面,我们同时在 mixin 和 app 中定义 created 函数

const app = Vue.createApp({
  ...
  created() {
    console.log("app created");
  }
}); 
// 定义全局 mixin
app.mixin({
  created() {
  ...
    console.log("mixin created");
  }
});

运行此页面,打印台会输出

mixin created
app created

也就是说,mixin中的生命周期钩子函数与 app 组件中的钩子函数都会运行,mixin 优先执行


混入自定义属性

我们还可以直接在 mixin 和 app 组件中自定义属性。自定义属性在模板中需要用 $options[prop] 的方式调用

const app = Vue.createApp({
  message: "app message",
  template: "<div @click="handleClick">{{$options.message}}</div>"
}); 
// 定义全局 mixin
app.mixin({
  message: "mixin message"
});

运行页面,模板将会展示 app 组件中 message 中的值 app message ,可见,自定义属性也是组件比 mixin 优先级高。

修改自定义属性合并策略

如果我们想让 mixin 的优先级高于组件的优先级,我们可以通过以下代码进行修改

app.config.optionMergeStrategies.message = (mixinVal, appVal) => {
  return mixinVal || appVal;
};

合并策略方法中接受两个参数,第一个参数为 mixin 自定义属性值,第二个参数为 app 组件自定义属性值,用户可以通过方法判断来返回哪个值,来定义自定义属性的优先级。

上面代码定义了如果 mixinVal 有值则返回 mixinValue,否则返回 appVal,所以模板中显示的应该的是 mixin message。


局部组件

局部组件的定义,需要显式声明进组件内。

// 1. 声明局部组件变量
const MyMixin = {
  data() {
    return {
    };
  },
  created() {
    console.log('mixin created');
  },
  methods: {
    handleClick() {
    },
  },
};
// 2. 通过mixins属性注入到要被混合组件中
const app = Vue.createApp({
  mixins: [myMixin]
})

除了需要通过 mixins 属性注入,其他与全局组件无差异,所以不在单独阐述。


缺陷

mixin可以将部分组件抽成可重用块,但是他也有不可避免的问题。

  1. mixin很容易发生冲突,你会不清晰某个值到底是从 mixin 还是 app 来的。
  2. 可重用性有限,不能通过传递参数修改 mixin 的逻辑,降低了抽象逻辑的灵活性。


总结

这篇文章,我们讲了如下几点:

  1. mixin的概念及定义
  2. 混入 data、methods、生命周期函数
  3. 混入自定义属性,修改自定义属性的混合策略
  4. 全局 mixin 及 局部 mixin 定义方式
  5. mixin 的缺陷


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10030

关闭

Vue3 的响应式和以前有什么区别,Proxy 无敌?

大家都知道,Vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截它的原型方法来实现响应式。

[译]尤雨溪:Vue3的设计过程

在过去的一年中,Vue团队一直在研究Vue.js的下一个主要版本,我们希望在2020年上半年发布该版本。(在撰写本文时,这项工作仍在进行中)。 Vue的主要版本于2018年底形成,当时Vue 2的代码库已有两年半的历史了

vue3和vue2生命周期的对比

使用<keep-alive> 组件会将数据保留在内存中,比如我们不想每次看到一个页面都重新加载数据,就可以使用组件解决。vue3使用生命周期需要单独从vue中引用,并且只能在setup函数内调用

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

vue3对比vue2使用,代码解释最直观

对于大多数组件,Vue2和Vue3中的代码即使不完全相同,也是非常相似的。但是,Vue3支持片段,这意味着组件可以有多个根节点。这在呈现列表中组件以删除不必要的包装器div元素时特别有用。但是,在本例中,表单组件的两个版本都将只保留一个根节点

快速使用Vue3最新的15个常用API

大家都知道,现在Vue3的各个版本已经陆续发布了,并且有很多的团队已经着手各个库的开发与Vue2向Vue3的升级,我们当然也不能落后,所以赶紧将你手中的Vue2升级到Vue3,跟着本文一起学习新的API吧

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue3源码解析(computed-计算属性)

在Vue2中我们已经对计算属性了解的很清楚了,在Vue3中提供了一个computed的函数作为计算属性的API,下面我们来通过源码的角度去分析计算属性的运行流程。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!