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

【问题标题】：Find out which property changed in a Vue.js deep custom directive?找出 Vue.js 深度自定义指令中哪些属性发生了变化？
【发布时间】：2016-06-29 17:23:47
【问题描述】：

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

JSFiddle

<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的值，触发指令，但是update事件中oldvalue和newvalue是一样的。

我需要一种方法来找出哪个属性发生了变化。

有什么想法吗？

【问题讨论】：

你想让我写一个简单的函数来解决你的问题吗？因为我不相信 Vue atm 有办法做到这一点。
好吧，我真的需要这个在 Vue 指令中工作。我认为 oldvalue 和 newvalue 相同是一个错误。那你会用什么样的功能呢？
您在指令处理程序中的参数顺序错误。你的更新函数应该有newValue，然后是oldValue
好的，我改变了这个，但它们还是一样的，所以这似乎是一个错误。
我不认为这是一个错误 - oldVal 和 newVal 都包含相同的对象，因为对象没有改变，其中的某些属性发生了变化。现在，如果 Vue 将 oldVal 和 newVal 设置为对象内部发生更改的属性的值之前和之后，您将拥有这些值，但仍然不知道哪个属性发生了更改。您要求的是（如果有的话）新功能，需要更新功能的新/附加参数。

标签： javascript vue.js

【解决方案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 })
}

【讨论】：