Question

我有一个带有深度自定义指令的Vue，响应v.item：

中的更改

<div id='testdiv' v-demo="item">
  <div>
    {{item.name}}
  </div>
  <div>
    {{item.place}}
  </div>
</div>

Vue.directive('demo', {
    deep: true
  ,
    bind: function() {
      console.log('demo bound');
    }

  , update: function(newvalue,oldvalue) {
      console.log(newvalue,oldvalue);
    }
});

v=new Vue({
    el:'#testdiv'
  , data:function(){
      return {
        item: {
            name : "John Smith"
          , place : "Amsterdam"
        }
      };
  }
});

这很有效。例如，当我在控制台中更改v.item.place的值时，会触发该指令，但oldvalue和newvalue在update事件中是相同的。

我需要一种方法来找出哪些属性已经改变。

有什么想法吗？

Answer 1

每当项目更改时，您都可以使用计算属性来创建一个新对象，然后在指令中使用该计算对象：

computed: {
    _item () {
      return Object.assign({}, this.item)
    },
  },

<div id='testdiv' v-demo="_item">
  <div>
    {{item.name}}
  </div>
  <div>
    {{item.place}}
  </div>
</div>

其他解决方案是将您的项目存储在HTML元素（由指令提供）中，然后在更新挂钩中进行手动比较，如下所示：

function update(el, { value }) {
  if (JSON.stringify(el.__item) === JSON.stringify(value)) {
    return
  }
  bind(el, { value })
}

找出Vue.js深度自定义指令中哪些属性发生了变化？

1 个答案: