详解Vue的mixin策略


Posted in Vue.js onNovember 19, 2020

我之前一直以为mixin的合并是以组件内的优先,即mixin的内容如果和组件内有冲突的,以组件内为准,确实存在这种情况,但是vue指定的策略更详细,下面分别记录各种情况对应的合并策略

基本

当一个组件使用mixin的时候,所有mixin的选项会被混入到组件自己的选项中, 这部分没什么好说的,直接看代码

// define a mixin object
const myMixin = {
 created() {
  this.hello()
 },
 methods: {
  hello() {
   console.log('hello from mixin!')
  }
 }
}

// define an app that uses this mixin
const app = Vue.createApp({
 mixins: [myMixin]
})

app.mount('#mixins-basic') // => "hello from mixin!"

选项的合并策略

这里的选项指的就是 data methods和生命周期钩子函数这些选项,他们的会采取不同的合并策略

像data,methods,components,directives这样的会被合并进同一个对象中,并且遇到冲突项以组件的为准

const myMixin = {
 data() {
  return {
   message: 'hello',
   foo: 'abc'
  }
 }
}

const app = Vue.createApp({
 mixins: [myMixin],
 data() {
  return {
   message: 'goodbye',
   bar: 'def'
  }
 },
 created() {
  console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" }
 }
})
const myMixin = {
 methods: {
  foo() {
   console.log('foo')
  },
  conflicting() {
   console.log('from mixin')
  }
 }
}

const app = Vue.createApp({
 mixins: [myMixin],
 methods: {
  bar() {
   console.log('bar')
  },
  conflicting() {
   console.log('from self')
  }
 }
})

const vm = app.mount('#mixins-basic')

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

而对于钩子函数就不是简单的替换了,如果有同名的,他们会被一起合并进数组中,然后依次调用,且mixin的钩子函数会率先被调用

const myMixin = {
 created() {
  console.log('mixin hook called')
 }
}

const app = Vue.createApp({
 mixins: [myMixin],
 created() {
  console.log('component hook called')
 }
})

// => "mixin hook called"
// => "component hook called"

全局混入和自定义选项

const app = Vue.createApp({
 myOption: 'hello!'
})

// inject a handler for `myOption` custom option
app.mixin({
 created() {
  const myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

app.mount('#mixins-global') // => "hello!"

上述代码,我们在全局创建了一个自定义选项,然后进行了全局混入处理,但是需要注意的是,这会影响到这个app所有的子组件:

const app = Vue.createApp({
 myOption: 'hello!'
})

// inject a handler for `myOption` custom option
app.mixin({
 created() {
  const myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

// add myOption also to child component
app.component('test-component', {
 myOption: 'hello from component!'
})

app.mount('#mixins-global')

// => "hello!"
// => "hello from component!"

我们可以看到,对于自定义选项这不是简单的替换,而是分别调用,当然我们也可以制定我们自己的合并策略:

const app = Vue.createApp({})

app.config.optionMergeStrategies.customOption = (toVal, fromVal) => {
 // return mergedVal
}

合并策略接收两个参数,分别是指定项在父实例和子实例的值,当使用mixin的时候我们可以查看打印什么:

const app = Vue.createApp({
 custom: 'hello!'
})

app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
 console.log(fromVal, toVal)
 // => "goodbye!", undefined
 // => "hello", "goodbye!"
 return fromVal || toVal
}

app.mixin({
 custom: 'goodbye!',
 created() {
  console.log(this.$options.custom) // => "hello!"
 }
})

可以看到第一次从mixin打印,然后从app打印。

注意事项

  • mixin很容易造成冲突,你得确保不会有冲突的属性名,来避免冲突,这会造成额外的负担
  • 复用性有限,因为mixin不能接受参数,所以逻辑是写定的,不灵活

所以官方推荐使用 Composition Api来组织逻辑

以上就是详解Vue的mixin策略的详细内容,更多关于Vue的mixin策略的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
vue在图片上传的时候压缩图片
Nov 18 #Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 #Vue.js
You might like
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python比较两个列表是否相等的方法
2015/07/28 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python一键去抖音视频水印工具
2018/09/14 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
学生自我评语大全
2014/04/18 职场文书
电力培训心得体会
2014/09/02 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
JAVA API 实用类 String详解
2021/10/05 Java/Android
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers