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

Find out which property changed in a Vue.js deep custom directive?

本文关键字：属性 发生了 变化 指令 Vue js 深度 自定义 找出      更新时间：2023-09-26

我有一个带有深度自定义指令的 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相同。

我需要一种方法来找出哪个属性已更改。

知道吗？

每当项发生更改时，都可以使用计算属性创建新对象，然后在指令中使用此计算对象：

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 })
}

相关文章：