Question

如何以能够检测模型变化的方式编写Vue 2.x指令？我只能绑定到元素并检测输入，keydown等。但我无法检测模型何时更新。这是否超出了Vue的指令范围？

＆＃13;

 Vue.directive('text-validation', {
        bind: function (el, binding, vnode) {
            el.addEventListener('input', function(){
            	console.log('only gets called on input, not model updates');
            });
        }
    });
    
new Vue({
	el: '#app',
  data: {
  	text: 'testing...'
  },
  mounted: function() {
  	setTimeout(function(){
       this.text = 'detected change';
    }.bind(this), 2000)
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>

<div id="app">
  <input v-model="text" v-text-validation=""/>
</div>

＆＃13;

Answer 1

啊，我忘记了Vue.directive('text-validation', { bind: function (el, binding, vnode) { el.addEventListener('input', function(){ console.log('got called'); }); }, update: function(el, binding, vnode) { console.log('got called on upadate'); } }); new Vue({ el: '#app', data: { text: 'testing...' }, mounted: function() { setTimeout(function(){ this.text = 'detected change'; }.bind(this), 2000) } })钩子的用途。我创建了一个工作片段，它完成了我的预期 - 模型更新调用了更新钩子

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="app">
  <input v-model="text" v-text-validation=""/>
</div>

＆＃13;

var modelExp = vnode.data.directives.find(d->d.name === 'model');
vnode.context.$watch(modelExp, function(){//do what i need}, {deep, true});

＆＃13;

修改

我最终在bind（）钩子里面设置了一个watch（）。从update（）内部触发任何类型的DOM本机事件都会导致各种无限循环。

<强>伪代码：

RegisterClassExW

这是从＆＃34; VeeValidate＆＃34;借来的。 project，ListenerGenerator.prototype._attachModelWatcher

Answer 2

正如@Bert指出的那样 - 你可以/可以使用观察者（如果你不需要更高级的东西 - 作为中央状态/商店Vuex等。）。

对于观察者 - 非常重要的是要注意你可以使用“深度：真实”来观察物体内的儿童;

watch: {
    myData: {
      handler: function (newVal, oldVal) {
        // we have new and old values
      },
      deep: true /* we will be notified of changes also if myData.child is changed :) */
    }
  }

状态更复杂，但如果应用程序变得越来越复杂，它可以成为救星......

发现这个有用且简单的演示：Vue - Deep watching an array of objects and calculating the change?

用于检测模型变化的Vue指令

2 个答案: