Vue如何监控一个对象，当对象内容发生改变时执行一个方法？

Question

Vue如何监控一个对象，当对象内容发生改变时执行一个方法？

Answer 1

可以使用vue中的watch方法监听该对象，设置deep:true可以进行深度监听，当对象中的属性发生变化时，会调用handler方法，在里面写你的逻辑就可以了

<template>
  <div>
    <input v-model="user.name">
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {
          name: ''
      }
    }
  },

  watch:{
      user: {
        deep: true,
        handler: function (newVal,oldVal){
          console.log('newValue', newVal);
          console.log('oldValue', oldVal.name);
        }
      }
  },
}

Answer 2

建议你用watch监听事件来完成

Answer 3

..., watch: { 'params.limit': function (newValue, oldValue) { }, name: function (newValue, oldValue) { } },

假设你的ViewModel里面有一个对象是 { params: { limit: '' }, name: '' }

Answer 4

求解这种怎么监听？

<table ...>
  ...
  <tbody>
    <tr v-for="(item, index) in items" :key="index" :class="{ actived : selected === index}">
      <td>{{ item.name }}</td>
      <td>
        <input v-if="item.editable" v-model="item.age" type="number" ... />
        <span v-else>{{ item.age }}</span>
      </td>
    </tr>
  </tbody>
</table>

问题：
如何在选中行可编辑时，自动聚焦输入框？ <td :ref="'input' + index" ...> 无效，<tr v-for="(item, index) in items" :key="index" :ref="item" ...> 也无法通过 $el.querySelector('input.number') 获取。