Prevent creation of $validator on every component.

Versions:

• VueJs: 2.3.2
• Vee-Validate: 2.0.0-rc.3

Description:

In the beforeCreate() hook of the vee-validate mixin, a $validator object is created for every component in Vue.

I think this is a bit excessive, and would like to propose that instead it is created only when needed, through a computed property that creates it on the fly on the first use. That way, only the components that use validation need to create this property. In my app, that’s maybe about 5% of the used components.

mixin.js:

import Validator from './validator';

export default (Vue, options) => ({
  computed: {
    $validator() {
      const validator = new Validator(null, { init: false });
      Vue.util.defineReactive(validator, 'errorBag', validator.errorBag);
      Vue.util.defineReactive(validator, 'fieldBag', validator.fieldBag);
      validator.init();
      return validator;
    },
    [options.errorBagName]: {
      get() {
        return this.$validator.errorBag;
      }
    },
    [options.fieldsBagName]: {
      get() {
        return this.$validator.fieldBag;
      }
    }
  }
});

I haven’t tested this yet but am fairly certain that it should work. I am happy to do the testing and create a PR if it’s welcome.

[chlab]

Validation works for me.

First of all, you must be using ^2.0.0-rc.4.

Disable automatic injection of new $validator instances in every component: Vue.use(VeeValidate, { inject: false })

On the children:

export default {
  inject: ['$validator'],
  // ...the rest of your component
}

on the parent:

export default {
  $_veeValidate: {
    validator: 'new'
  },
  // ...the rest of your component
}

validation: this.$validator.validateAll()

That’s all it takes. Make sure you aren’t using scopes anymore in case you were using them before.

[lehni]

I am just realising that this change would allow for another welcome scenario: The possibility to share one validator across multiple child components. I have now tested this, and it works well in my tests:

1. Remove the default beforeCreated() and mounted() hooks. It would be nice if this hack wasn’t needed:

   import VeeValidate from 'vee-validate'
   Vue.use(VeeValidate)
   // Remove the VeeValidate beforeCreate() and mounted() hooks again that create
   // and assume $validator objects for every component:
   Vue.options.beforeCreate.pop()
   Vue.options.mounted.pop()
   

2. Define a $validator property on the parent component that creates the validator. It is worth considering if this functionality that is already present internally in vee-validator could be exposed for such a scenario:

   computed: {
     $validator() {
       const validator = new Validator(null, { init: false })
       Vue.util.defineReactive(validator, 'errorBag', validator.errorBag)
       Vue.util.defineReactive(validator, 'fieldBag', validator.fieldBag)
       return validator
     }
   }
   

3. Define a $validator property on the child components that retrieves the $validator from the parent. Note that this even allows for multiple levels of nested children:

   computed: {
     $validator() {
       return this.$parent.$validator
     }
   }
   

4. Components that are going to use validation need to explicitly call $validator.init() from their mounted() callback:

   mounted() {
     this.$validator.init()
   }
   

And that’s it! It just works.

Note that this would allow for a much simpler pattern to address the situation outlined in https://gist.github.com/sproogen/147d75db261505e8a558a7fd11a20551