vue-formulate解析

vue-formulate

  1. 解決了什么?
    快速創建表單注册送28体验金的游戏平台,上手成本低只需要了解兩個基本表單類型(fomrmulateInput和formulateForm)

  2. 實現原理清晰,插件包的形式生成實例

原理圖

vue所需知識前置

  1. 實例加載順序
// expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true )
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

  1. vue插件包如何編寫
    vue通過Vue.use把包注冊使用
install (Vue, options) {
    Vue.prototype.$formulate = this
    this.options = this.defaults
    var plugins = this.defaults.plugins
    if (options && Array.isArray(options.plugins) && options.plugins.length) {
      plugins = plugins.concat(options.plugins)
    }
    plugins.forEach(plugin => (typ plugin === 'function') ? plugin(this) : null)
    this.extend(options || {})
    for (var componentName in this.options.components) {
      Vue.component(componentName, this.options.components[componentName])
    }
  }
  1. provide & inject 父級拋出方法,子級或更低級想使用可以自己inject,
// formulatform
  provide () {
    return {
      formulateFormSetter: this.setFieldValue,
      formulateFormRegister: this.register,
      getFormValues: this.getFormValues,
      observeErrors: this.addErrorObserver,
      removeErrorObserver: this.removeErrorObserver
    }
  },
  // formulateInput
  inject: {
    formulateFormSetter: { default: undefined },
    formulateFormRegister: { default: undefined },
    getFormValues: { default: () => () => ({}) }
  },
  1. inheritAttrs設置成false
    組件將不會把未被注冊的props呈現為普通的HTML屬性,$attrs 將所有傳入的prop都拿到

  2. model自定義

一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件,但是像單選框、復選框等類型的輸入控件可能會將 value attribute 用于不同的目的。model 選項可以用來避免這樣的沖突:

6 $emit

觸發當前實例上的事件。附加參數都會傳給監聽器回調

總結

  • 維護一份實例如何做到子級實例注冊到父級身上,還能做到解耦注册送28体验金的游戏平台,通過provide & inject去實現。
  • 如何快速復用共享方法,通過注冊到vue實例。
  • 如何復用基礎方法類型,通過組件的computed 把當前實例this通過function.call的方式快速實現模板復用。
  • 通過promise.all使多次校驗進行后再統一修改狀態,避免多次渲染
performValidation () {
      // 把校驗函數和參數處理好
      const rules = parseRules(this.validation, this.$formulate.rules(this.parsedValidationRules))
      // 通過promise的all把所有該校驗的都一次過校驗完后再觸發渲染
      this.pendingValidation = Promise.all(
        rules.map(([rule, args]) => {
          var res = rule({
            value: this.context.model,
            getFormValues: this.getFormValues.bind(this),
            name: this.context.name
          }, ...args)
          res = (res instanc Promise) ? res : Promise.resolve(res)
          return res.then(res => res ? false : this.getValidationMessage(rule, args))
        })
      )
        .then(result => result.filter(result => result))
        .then(errorMessages => { this.validationErrors = errorMessages })
      return this.pendingValidation
    },

感謝以及參考鏈接

第一次寫作注册送28体验金的游戏平台,肯定有很多不足的地方,希望海涵。如果你有不清楚的地方或者認為我有寫錯的地方,歡迎評論區交流。

原文鏈接:

上一篇:2020 前端面試復習大綱之N+公司感悟
下一篇:Koa 路由中間件原理及使用技巧

相關推薦

  • 🔥 Promise|async|Generator 實現&原理大解析 | 9k字

    筆者剛接觸async/await時,就被其暫停執行的特性吸引了,心想在沒有原生API支持的情況下,await居然能掛起當前方法,實現暫停執行,我感到十分好奇。好奇心驅使我一層一層剝開有關JS異步編程的...

    7 天前
  • (小白篇)vue-cli3.0創建項目+引入element-ui

    vuecli在2018年8月份發布了3.0版本,經過重構之后,可以說是一個船心版本! 在項目都落地之后,就想升級一下cli版本,嘗一嘗3.0帶來的舒適,也是為后面項目的開展做一個準備。

    1 年前
  • (小小黑科技)vue+echarts實現半圓圖表

    如何用echarts實現半圓圖表?在echarts官方實例倒騰一波,發現官方并沒有提供半圓圖表的寫法,那怎么辦呢?官方沒提供,但需求還是要實現的。 半圓圖表其實就是餅圖的一半,那么簡單的思路如下:設...

    1 年前
  • (vue框架)為element組件賦初始值以后無法更改值得問題

    情況描述:組件未加載時已有初始值,mounted里面加載數據,賦值,渲染以后,組件無法更改內容 data里面已經有這個表單對象的初始值但還是無法修改,之前有過一次,沒有給表單綁定對象,所以賦值以后無法...

    9 個月前
  • (vuejs學習)2、使用ElementUI(*)

    1.element安裝 開發環境是win10,一到node官網下載node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    8 個月前
  • (vuejs學習)1、Vue初上手(*)

    參考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    8 個月前
  • 鼠標移入移出效果 -- jQuery/Vue版

    元素內遮罩層根據鼠標方向顯示的效果比較常見,比如百度圖片里的圖片信息展示。自己動手實現jQuery插件版和Vue組件版效果。 原文鏈接(http://www.bestvist.com/p/56) ...

    2 年前
  • 麻雀雖小五臟俱全的Vue拉勾項目,看看應該有幫助

    全棧系列Vue版拉勾,客官們來瞧瞧 模擬拉勾app系列vue前端界面 github地址,來猛戳吧(https://github.com/qianbin01/lagouvue) 前言 本項目...

    1 年前
  • 高性能網站搭建-前端性能優化 (附Vue首屏加載時間優化詳細方案)

    前言 事實上, 只有的最終用戶響應時間是發在從Web服務器獲取HTML文檔并傳送到瀏覽器中的。如果希望能夠有效地減少頁面的響應時間,就必須關注剩余的最終用戶體驗。

    10 個月前
  • 騷操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 筆者最近在學習使用,提到react就繞不過去。redux是一個狀態管理架構,被廣泛用于rea...

    2 年前

官方社區

掃碼加入 JavaScript 社區