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 ...
随机推荐
- HttpWebRequest 返回BadRequest(400)
问题背景: 使用 HttpWebRequest 调用 GetResponse() 方法,返回 WebException,HttpStatusCode 是 400,无法获取返回的错误信息: 解决方式: ...
- Type-C协议（CC检测原理）-CC1和CC2接电阻-数字和模拟耳机兼容
1 简介 USB Type-C其实是USB的一种接口形态,USB的接口形态可以分为USB Type-A.USB Type-B.USB Type-C,USB Type-A和USB Type-B还有两种不 ...
- vue打印浏览器页面功能的两种实现方法
目录 方法一:通过npm 安装插件 方法二:手动下载插件到本地 总结 推荐使用方法二 方法一:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 ...
- sql server 新建用户数据库授权
必须对数据库进行 db_owner 授权.
- Qt QFileSystemModel 的使用
Model 指的是数据 View 指的是界面,View不用设置,只需要和Model进行绑定,绑定完成之后就是Model的格式了 例子:本例子中QListView QTableView QTreeVie ...
- Sqoop - 使用场景
Oracle >> HDFS sqoop import --connect jdbc:oracle:thin:@<oracle_host>:<oracle_port> ...
- Shell - 脚本案例
题记部分 一.节点状态监控脚本(nodeStatusCheck.sh) [脚本名称]nodeStatusCheck.sh [监控规则]通过ping的方式监控集群节点状态,检查节点是否失联 [实现方式] ...
- 从汇编层解读Golang的闭包实现：逃逸分析与性能影响
本文精心梳理了一系列面试中具有一定难度的高频Golang问题,其中部分知识点可能你之前未曾深入探究,然而它们却在面试和实际工作中至关重要. 包括:Golang的基础语法.并发模型.内存管理等核心知识点 ...
- DOS批处理小案例应用分享 - 整理桌面
想必大多数办公的同志都有个习惯----往桌面上堆放文件,各种文件.几天下来桌面就杂乱无章,乱七八糟的.能做一个快速清理的功能,是很有实用价值的.比如采用Windows自带的DOS批处理系统,就可快速搭 ...
- ARC101E题解
前言 此片题解大致按照笔者做题思路进行讲解. 简要题意 有一棵树,树上有偶数个节点.你需要给这些点两两配对,一组已经配对的点会将两点之间的树边进行一次覆盖.一组合法方案需要满足树上所有边都被覆盖至少一 ...