介绍
Vue中的mixin混入使用方式
# 什么是mixin混入
- Vue的
mixin非常强大<script>标签中的绝大部分内容都可以设置混入 mixin虽然很强大 但是还需要尽可能少用 毕竟管理不方便mixin适合作为基类的一种继承手段 而非逻辑的继承手段- mixin也可以进行全局注册。使用时格外小心！一旦使用全局 mixin，它将影响每一个之后创建的组件 (例如，每个子组件)。
mixin模式表面上看起来很安全。然而，通过合并对象来共享代码，由于它给代码增加了脆弱性，并且掩盖了推理功能的能力，因此成为一种反模式。Vue3的Composition(组件) API最聪明的部分是，它允许Vue3依靠原生JavaScript中内置的保障措施来共享代码，比如将变量传递给函- 注意:
mixin中不要出现和当前组件一样的名称 如果一样 会优先取组件的名称 覆盖mixin混入的名称
# Vue2中mixin的使用
// 创建一个 mixin.js
export default{
data(){
return{
// 变量
}
},
created() {
// do something...
},
methods:{
// 代码
}
}
// vue页面中引入
// 导入mixin混入的文件
import mixinDemo from 'mixin.js'
export default{
data(){},
// 组件中使用 mixin
mixins: [mixinDemo]
}
# Vue3使用混入
- Vue3有
Composition API不用mixinComposition API比他强大太多 - Vue3是组合式API 这种写法把一些相同逻辑的代码进行拆分 极大的提高了扩展性 在Vue2组件化方式上进行逻辑性的拆分
他的优势:
- 暴露给模板的 property 来源十分清晰，因为它们都是被组合逻辑函数返回的值
- 不存在命名空间冲突，可以通过解构任意命名
- 不再需要仅为逻辑复用而创建的组件实例
# 响应式Composition API例子
- 我们把
reactive()声明的响应式数据 进行组合API的方式来写 先拆分 然后再Vue文件中进行导入 那么拆分的数据可以再多个Vue文件中复用 复用性极高 而且我们不用担心命名冲突 因为我们结构后可以另起名称 - 我们还可以把声明的方法也用这种方式导出 然后再Vue文件中进行使用
- 注意: 无论是方法 还是 响应式数据 我们都需要用
return的方式返回数据
创建一个 data.js
- 我们把响应式
reactive()数据拆分 - 如果我们想在组合api中的js文件 执行生命周期 然后引入到Vue文件后 会自动执行组合api中的生命周期
// 导入Vue组合API
import { reactive, onMounted } from 'vue'
export default function () {
const content = reactive({
// 声明一个值
width: 123
})
// 创建一个自增的方法
const addwidthF = () => {
// +1的方法
content.width++
}
// 使用生命周期 页面加载时候 自增一下 直接调用方法即可
onMounted(() => {
// 执行自增的方法
addwidthF()
})
// 把reactive()的响应式数据 和 我们声明的方法 同时的暴露出去
return { content, addwidthF }
}
在Vue中使用
- 我们依旧可以通过
toRefs()把数据进行结构 直接把结构的数据在模板中使用 - 如果我们在逻辑中使用
toRefs()结构数据 需要.value或者是不用 直接使用导入的数据 - 我们不用担心命名冲突 因为我们结构后可以另起名称 结构是支持重新命名滴
- 解构导入的组合API方法 可以直接在
setup语法糖中使用 无需放到onMounted()生命周期中 执行的优先级比onMounted()高- 也可以放到
onMounted()中 不过二选一 要么放在setup语法糖中要么就放到onMounted()中
- 也可以放到
<template>
<div>
<div>
{{width}}
</div>
<button @click="addwidthF">加一</button>
</div>
</template>
<script setup>
// 导入Vue组合API
import { onMounted, toRefs } from 'vue'
// 导入Composition API 拆分的数据
import data from './settings/data.js'
// 结构Composition API 拆分的数据 我们可以给其再次给其命名 原数据名称: 新名字
// 在这里 我们同时导入使用了 reactive()的响应式数据 和 我们声明的方法
const { content: myContent, addwidthF } = data()
// 通过toRefs进行结构 可直接在模板中使用
const { width } = toRefs(myContent)
onMounted(() => {
// 执行一下导入的方法 (放在外部也可以 根据上下文执行)
addwidthF()
// toRefs()在逻辑中使用
console.log(width.value)
// 或者我们直接使用导入
console.log(myContent.width)
})
</script>
<script>
export default {
name: 'ToGranary'
}
</script>
- 有没有感觉 Vue3的
Composition API越来越像最一开始的js模块化写法 模块化+工程化 也许是最佳的前端工程化方案之一 - Vue3解决了Vue2也许不能胜任巨大工程化前端项目的痛点
- Vue3的
Composition API写法极大的增强了复用性 但是对于中小型项目这样拆分的写法 多少有点不值当 不过Vue3下得了厨房 上得了厅堂!面面俱到!
- Vue3的