前篇有介绍关于插件 plugin 的无敌强大和基本使用流程后, 当时从俺的经验上看是没咋去使用它的, 即英雄无用武之地. 本篇也是从网上找个案例来为 plugin 的强大来小试牛刀啦.
假设我们要做一个关于对数据做一个校验的插件. 假设我们先用 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 { name: 'youge', age: 18 }
},
// 自定义一种语法, 比如叫 check
check: {
age: {
validate: age => age >= 18,
message: 'hi main, biu biu biu'
}
},
template: `<div>name: {{name}}, age: {{age}}</div>`
})
app.mixin({
created() {
// console.log(this.$options.check)
for (key in this.$options.check) {
const item = this.$options.check[key]
this.$watch(key, (value) => {
const ret = item.validate(value)
if (!ret) console.log(item.message)
})
}
}
})
const vm = app.mount('#root')
</script>
</body>
</html>
虽然这样是能够通过 mixin 来实现, 但考虑更多的扩展性, 和让代理结构更加清晰和具有语义化和模块化的特点呢,咱还是建议用 plugin 的写法啦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>plugin 数据校验</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return { name: 'youge', age: 18 }
},
// 自定义一种语法, 比如叫 check
check: {
age: {
validate: age => age > 18,
message: 'hi main, biu biu biu'
},
name: {
validate: name => name.length >= 8,
message: 'name do do do bala bala'
}
},
template: `<div>name: {{name}}, age: {{age}}</div>`
})
// 通过插件的写法
const checkPlugin = (app, options) => {
app.mixin({
created() {
for (let key in this.$options.check) {
const item = this.$options.check[key]
this.$watch(key, (value) => {
const ret = item.validate(value)
if (!ret) console.log(item.message)
})
}
}
})
}
// 使用插件
app.use(checkPlugin)
const vm = app.mount('#root')
</script>
</body>
</html>
如此这般操作, 今后涉及的各种 vue 的扩展都能优先考虑用 plugin 来作为一个 "处理容器" 的作用啦, 它因为能获取到 app 和 options 嘛, 就理论上有无限扩充的可能性哦.
标签：插件,const,name,plugin,age,check,vue3,app From： https://www.cnblogs.com/chenjieyouge/p/16754136.html