vue3 基础-插件 plugin 案例演示

原创

致于数据科学家的小陈 2022-10-08 09:10:26 ©著作权

文章标签 mixin plugin vue基础 validate html 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者致于数据科学家的小陈的原创作品，请联系作者获取转载授权，否则将追究法律责任

plugin 案例演示啦

前篇有介绍关于插件 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>