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 ...
随机推荐
- NET中三种主机简单理解
在NET中有三个不同的主机: .NET WebApplication 主机,也称为最小主机. 这是.NET 6中的一个新特性,旨在提供最小的启动时间和内存消耗.最小主机只包括.NET运行时的最基本组件 ...
- [JOI 2020 Final] 火事 题解
给一篇题解.(下面这张图是从 luogu 上粘贴的,因为不太会画图) 其中纵坐标为 \(t\),横坐标为 \(a_i\). 发现同颜色块只有平行四边形和直角梯形(等腰直角三角形)两种情况. 可以将直角 ...
- 飞牛 fnos 使用docker部署NapCat-QQ对接autman教程
NapCatQQ介绍 无需图形环境,在Linux上表现出色,与现有Hook框架有本质区别,性能与内存占用优于基于Hook的框架. 配置简单,支持浏览器远程配置. NTQQ功能适配快速,持续跟进QQ最新 ...
- SpringBoot - [00] 注解大全
原文链接:https://mp.weixin.qq.com/s/DgNhohtJyEq4vMGEzqrP8A @SpringBootApplication 这个注解用于标识一个SpringBoot应用 ...
- 【目标检测】一、初始的R-CNN与SVM
1.流程 为什么要用SVM而不是CNN最后一层的softmax? 取什么模型必然是有标准衡量,这个流程取得是书上[4]写的,作者说他得实验证明SVM比FC的mAP要高,所以我流程暂且这样画了. R-C ...
- python 如何生成exe程序
cmd 安装包 pip install pyinstaller cd 进入程序文件夹内 3.输入命令pyinstaller -F xx.py 在dist文件夹下找到安装包即可
- 记一次QT的QSS多个控件设置同一个样式的问题
文章目录 Qt样式表的格式问题 问题的引入 qss 选择器 问题所在 Reference Qt样式表的格式问题 问题的引入 最近在进行样式设计的时候,发现了一个问题,具体如下: 我是将所有样式写到.q ...
- SpringCloud带你走进微服务的世界
认识微服务 随着互联网行业的发展,对服务的要求也越来越高,服务架构也从单体架构逐渐演变为现在流行的微服务架构.这些架构之间有怎样的差别呢? 单体架构 单体架构:将业务的所有功能集中在一个项目中开发,打 ...
- linux查看redis版本
1. redis-server --version 和 redis-server -v 2.redis-cli --version 和 redis-cli -v 如果报redis-server或red ...
- vmware vsphere 6.5
vmware vsphere 6.5是vsphere软件的经典版本,也是一款业界领先的服务器虚拟化平台,作为基础平台,是任何云计算环境的理想之选,其组件包括vCenter Server.ESXi.vS ...