如果不更新Vue.js中的组件，是否无法更新数据？

Question

有一个模板

<div class="wrap">
   <p v-for="item in items">
     {{ item }}
   </p>
</div>

有数据

data: {
  items: [1, 2, 3]
}

问题：在更新DOM之后我尝试实现数据，但更新数据会导致重新渲染组件。

预期结果：

问题：更新DOM后如何同步数据？

Live demo

Answer 1

下面是一个关于Vue实现拖放的简单演示。

1. 创建一只手表，它会观看this.dragedItem。如果更改，它将重新计算适用于dragItems的样式。

2. 当拖动开始时，获取当前拖动项目（dragedItem =当前项目）。

3. 当拖动结束时，重置拖动项目（dragedItem = {}），

4. drop 时，从dragItems中删除项目，然后按下dropItems。

在上述步骤中，我们只需要更改数据，然后Vue将自动渲染。

您可以查看HTML Drag And Drop API了解详情。

对于过渡效果，您可以查看Vue Guide: Enter/Leave Transition和Vue Guide: State Transtion。

app = new Vue({
  el: "#app",
  data: {
    dragItems: ['A', 'B', 'C', 'D'],
    dragedItem: {},
    dropItems: [],
    styles: {},
    defaultStyle: {'opacity': '', 'background-color': 'yellow'}
  },
  watch: {
    dragedItem: function () {
      this.styles = this.dragItems.reduce((pre, cur) => {
        pre[cur] = cur === this.dragedItem.item ? {'opacity': 0.5, 'background-color': 'blue'} : {'opacity': '', 'background-color': 'yellow'}
        return pre
      }, {})
    }
  },
  methods: {
    onDragStart: function (ev, item, index) {
      ev.dataTransfer.setData('text/plain',null)
      this.dragedItem = {item, index}
    },
    onDragEnd: function (ev) {
      this.dragedItem = {}
    },
    onDrop: function (ev) {
      this.dropItems.push(this.dragedItem.item)
      this.dragItems.splice(this.dragedItem.index, 1)
    }
  }
})

.dragzone {
  display:flex;
  flex-direction: row;
}

.dragger {
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid gray;
}

.dropzone {
  width: 200px;
  height: 30px;
  background: green;
  padding: 10px;
  display:flex;
  flex-direction: row;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div class="dragzone">
    <div class="dragger" draggable="true" 
    v-for="(item, index) in dragItems" :key="index"
    :style="styles[item] ? styles[item] : defaultStyle"
    @dragstart="onDragStart($event, item, index)" 
    @dragend="onDragEnd($event)"
    >
      {{item}}
    </div>
  </div>
  <div class="dropzone" @drop.prevent="onDrop($event)"
    @dragover.prevent=""
  >
    <div class="dragger" style="background-color:yellow" draggable="true" v-for="(item, index) in dropItems" :key="index">
      {{item}}
    </div>
  </div>
</div>