vue3 基础-Mixin
本篇开始来学习一波 vue 中的一些复用性代码的基础操作, 首先来介绍关于代码 "混入" mixin 的写法. 直观理解这个 mixin 就是一个 js 对象去 "混入" vue 的组件呀, 插件呀之类的片段中.
mixin 直观认识
<!DOCTYPE html>
<html lang="en">
<head>
<title>mixin 混入</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// mixin 对象混入
const myMixin = {
data () {
return { num: 999 }
}
}
const app = Vue.createApp({
data () {
return { num: 666, youge:"nb" }
},
// 其实就是在 vue 之外定义的一段代码, 通过 mixins 属性混进来
mixins: [myMixin],
template: `
<div>
<div>{{num}} - {{youge}}</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
上述代码即我们在 vue 的外面定义了一个叫 myMixin 的对象, 里面也有一个 data ( ) 的方法. 然后将其整个通过 vue 实例 app 的 mixins 属性成功 "混入" 了进来. 这个其实就是混入的概念呀.
值得注意的是, 属性发生冲突时, 如这里的组件 data 和 混合 data 冲突, 或者 methods 冲突, 组件属性的优先级会高于 mixin 的优先级.
生命周期函数混入
和 data ( ) 是相反的, 会先执行 mixin, 后执行组件的.
<!DOCTYPE html>
<html lang="en">
<head>
<title>mixin 混入</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// mixin 对象混入
const myMixin = {
data () {
return { num: 999, youge:"nb" }
},
// 生命周期函数先执行 mixin, 后执行组件的
created () {
console.log('mixin created')
}
}
const app = Vue.createApp({
data () {
return { num: 666 }
},
mixins: [myMixin],
// 组件的生命周期函数会被后执行
created () {
console.log('app created')
},
template: `
<div>
<div>{{num}} - {{youge}}</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这种在 vue 之外定义的对象, 通过 mixins 属性可以实现最外层的混入. 但如果有子组件的存在, 则子组件就不能使用这个 mixin 因为它是局部的, 就和之前局部组件和全局组件一样. 如果一定要使用, 则可以在子组件中进行 mixin, 这就略有一丢麻烦
<!DOCTYPE html>
<html lang="en">
<head>
<title>子组件用 mixin</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const myMixin = {
data () {
return { num: 999, youge:"nb" }
},
}
const app = Vue.createApp({
data () {
return { num: 666 }
},
mixins: [myMixin],
created () {
console.log('app created')
},
template: `
<div>
<div>{{num}} - {{youge}}</div>
<Son />
</div>
`
})
// 子组件不能直接用父组件的 mixin, 只能自己来进行混入
app.component('Son', {
mixins: [myMixin],
template: `<div>son-{{youge}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
可以发现这样写 mixin 其实是一个局部的, 一次定义多次引用, 这个没啥问题, 但基于咱对这种 vue 的父子组件来说, 感觉还是有点怪怪的, 理想中, 这个这个 mixin 都混入父组件了, 为啥子组件还不能直接引用, 额, 它就是不能.
当然, 我们还通过注册全局 mixin 来实现它.
<!DOCTYPE html>
<html lang="en">
<head>
<title>全局 mixin</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return { num: 666 }
},
created() {
console.log('app created')
},
template: `
<div>
<div>{{num}} - {{youge}}</div>
</div>
`
})
// 注册全局 mixin 所有组件自动注入
app.mixin({
data() {
return { num: 999, youge: "nb" }
},
created() {
console.log('mixin created')
}
})
const vm = app.mount('#root')
</script>
</body>
</html>
则通过 app.mixin ({ }) 的写法就将这个这个 mixin 对象全局混入了. 但是呢这种写法不推荐, 这和全局组件一样的, 一个是维护上的问题, 一个是性能上的问题啦.
自定义属性
在默认情况下, 组件中的属性优先级高于 mixin 中的属性, 其演示如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>自定义属性</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const myMixin = {
num: 666
}
const app = Vue.createApp({
mixins: [myMixin],
num: 999,
template: `
<div>
<div>{{this.$options.num}}</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
注意在 vue 实例中, 所有的属性最终都会挂载到 $options 中, 只不过我们常用的 data, methods, template ... 等已经有内置了就直接对应上啦. 那对于其他的就是挂载到最外层呀.
但 vue 也提供了对于这种自定义属性的合并策略是可以自定义的, 比如我们就要让 mixin 的属性优先级高于组件, 则可以通过 app.config.optionMergeStrategies.xxx 的方式进行配置即可.
<!DOCTYPE html>
<html lang="en">
<head>
<title>自定义属性的优先配置</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const myMixin = {
num: 666
}
const app = Vue.createApp({
mixins: [myMixin],
num: 999,
template: `
<div>
<div>{{this.$options.num}}</div>
</div>
`
})
// 编写 自定义属性 的优先策略配置
app.config.optionMergeStrategies.num = (mixinValue, appValue) => {
return mixinValue || appValue
}
const vm = app.mount('#root')
</script>
</body>
</html>
但基于 vue3 的新特性, 其实这种 mixin 的写法相对少了很多, 更多则会有 CompositonAPI 的方式来做替换会显得更加强大和灵活啦.
小结
- mixin 混入的意思就是在 vue 实例之外的对象可以通过 app 的 mixins 属性混入 vue 中来管理使用
- 组件 data, methods 的优先级高于 mixin , 即只会显示一个
- 生命周期函数 mixin 的优先级高于组件, 会依次调用
- 自定义属性的组件优先级高于 mixin, 但可通过 app.config.optionMergeStrategies.xxx 进行配置
vue3 基础-Mixin的更多相关文章
- vue3基础
什么是CDN? 内容分发网络--通过相互链接的网络系统,利用最靠近用户的服务器,更快更可靠的发送给用户. vue的cdn引入 method中的函数为什么不能用this? this的主要使用是来获取da ...
- Vue3 中有哪些值得深究的知识点？
众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...
- Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面
一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...
- scss 常用语法
点击查看 sass 官方文档 1.编译 初学可以在atom 中编译 安装命令 gem install sass atom中安装atom-sass ,mac 中"control+option+ ...
- Vue+Antd搭配百度地图实现搜索定位等功能
前言 最近,在做vue项目的时候有做到选择地址功能,而原项目中又引入了百度地图,所以我就打算通过使用百度地图来实现地址搜索功能啦. 本次教程可能过于啰嗦,所以这里先放上预览地址供大家预览--点我预览, ...
- sass之mixin的全局引入（vue3.0）
sass之mixin的全局引入(vue3.0) 1.scss文件(mixin.scss) /* 渐变 */ @mixin gradual($color, $color1){ background: $ ...
- vue3 自学（一）基础知识学习和搭建一个脚手架
两年前曾自学过几天vue,那时候版本还是vue2,但后来项目中一直没用到,当时也觉得学习成本太高,便没有继续学习下去.初学者可以看下链接文章以前的吐槽~~ 学习 Vue ,从入门到放弃 最近部门决定升 ...
- VUE3 之 使用 Mixin 实现代码的复用 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:舍得舍得,先舍才能后得. 言归正传,今天我们来聊聊 VUE 中使用 Mixin 实现代码的复用. 2. Mixin 的使用 2.1 不使用 Mixin 的写法 <body ...
- VUE3 之 全局 Mixin 与 自定义属性合并策略 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:心态决定命运,好心态才能有好的命运. 言归正传,今天我们来聊聊 VUE 中的全局 Mixin 与 自定义属性合并策略. 2. Mixin 的使用 2.1 全局 Mixin 之前 ...
- Vue3从基础到精通
目录 一.Vue3介绍 1. Vue3的变化 2. Vue2和Vue3的不同之处 二.Vue3创建项目 1.用vue-lci创建步骤 2.用vite创建步骤 三.setup函数 四.ref.react ...
随机推荐
- AI探索：通过宏脚本给小众编辑器EverEdit插上AI的翅膀！
1 AI探索:通过宏脚本给小众编辑器EverEdit插上AI的翅膀! 1.1 背景 在AI编程大行其道的背景下,各种AI编程工具:Cursor.VSCode的各种插件.Trae等等搞得不亦乐乎!您 ...
- TextEdit 使用Mask验证输入格式为邮箱
设置Mask代码如下: <dxe:TextEdit Text="{Binding Email}" MaskType="RegEx" Mask=" ...
- 别再为文本提取抓狂！一站式文本提取神器Kreuzberg 助你解决PDF、图片、文档等多格式文件的文本提取难题
大家好,我是六哥,相信很多朋友肯定都有过从各种文档里提取文本的经历,那过程可太让人头疼了!今天就给大家分享一款超实用的现代Python库--Kreuzberg,帮你轻松解决文本提取的难题. 一.Kre ...
- SpringBoot - [07] Web入门
题记部分 一.Web 入门 SpringBoot将传统Web开发的mvc.json.tomcat等框架整合,提供了spring-boot-starter-web组件,简化了Web应用配置.创建Sp ...
- 当你在浏览器中输入 google.com 后按下回车发生了什么？
按下"g"键 接下来的内容介绍了物理键盘和系统中断的工作原理,但是有一部分内容却没有涉及.当你按下"g"键,浏览器接收到这个消息之后,会触发自动完成机制.浏览器 ...
- Xshell连接有跳板机(堡垒机)的服务器
一.Xshell直连有跳板机的服务器 跳板机IP:112.74.163.161 端口号: 22 服务器IP:47.244.217.66 端口号:22 1. 新建跳板机会话 点击连接,主机和端口 ...
- gazebo小车模型（附带仿真环境）
博客地址:https://www.cnblogs.com/zylyehuo/ 参考链接 1.(https://blog.csdn.net/qq_43406338/article/details/109 ...
- 编程神器Trae：当我用上后，才知道自己的创造力被低估了多少
"AI会让每个人都能成为工具创造者,打破你能力边界,有时候只需要一个想法." AI粉嫩特攻队,2025年3月23日. 前几天参加了一场行业闭门研讨会,满满1个半小时的干货演讲让我收 ...
- python-argparse用法简介
1. argparse介绍 argparse是Python标准库中用于解析命令行参数的模块.它提供了一种简洁而灵活的方式来处理命令行参数,包括选项(可选参数)和位置参数(必需参数) 2. argpar ...
- svelte+vite+ts+melt-ui从0到1完整框架搭建
框架太"重"了:通常一个小型项目只由少数几个简单页面构成,如果使用 Vue 或者 React 这些框架来研发的话,有点"大材小用"了.构建的产物中包含了不少框架 ...