vue中watch监听对象中某个属性的方法

在Vue中，我们可以使用watch来监听对象中某个属性的变化，并且根据变化做出相应的反应。下面就是如何使用vue中的watch监听对象中某个属性变化的攻略:

创建一个监听对象中某个属性的watch方法

在Vue组件中，我们可以使用watch来监听对象中某个属性的变化。首先，在data中定义一个对象，并在其中初始化属性。

data() {
  return {
    user: {
      name: '',
      age: 0
    }
  }
}

假如我们想监听user对象下的name属性，则可以使用watch来监听：

watch: {
  'user.name': function(val) {
    console.log('用户姓名变化为: ' + val)
  }
}

以上代码意思是：当user对象下的name属性被修改时，会执行watch监听函数，打印'name'属性新的值。

处理监听方法中的一些逻辑

在创建watch监听方法时，我们可以添加一些逻辑处理，比如当属性值改变时，根据新值去更新页面或者请求服务器获取新数据。

  watch: {
    'user.name': function(val) {
        console.log('姓名变化为: ' + val)
        this.getUserInfo()
    }
  },
  methods: {
    // 请求服务器获取新的用户数据
    getUserInfo() {
      // 假如此处需要请求服务器获取新的用户数据
      // 代码省略...
      console.log('请求新的用户数据')
    }
  }

以上代码意思是：当user对象下的name属性被修改时，会执行watch监听函数，打印'name'属性新的值，并且发起请求更新页面用户数据。

示例1

下面是一个完整的使用watch监听vue对象中属性变化的例子。我们在data中定义了一个user对象来存储用户属性信息，当其中的name属性被修改时，会打印出name属性的新值。

<template>
  <div class="app">
    <input type="text" v-model="user.name" placeholder="请输入姓名">
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      user: {
        name: '',
        age: 0
      }
    }
  },
  watch: {
    'user.name': function(val) {
      console.log('用户姓名变化为: ' + val)
    }
  }
}
</script>

示例2

下面是一个使用watch监听vue对象中属性变化、并且请求新数据的例子。假设我们需要根据用户选择的城市来获取该城市的天气情况，从而更新页面的温度信息。我们需要定义一个watch函数监听city属性变化，并且根据变化的值去请求服务器获取新的天气信息。

<template>
  <div class="app">
    <select v-model="city" @change=cityChange()>
      <option value="">请选择城市</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
    </select>
    <p>当前城市：{{city}}</p>
    <p>当前温度：{{temperature}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      city: '',
      temperature: ''
    }
  },
  watch: {
    city: function(val) {
      this.getTemperature()
    }
  },
  methods: {
    // 请求服务器获取新的天气信息
    getTemperature() {
      // 假设请求新数据，在此处省略
      console.log('请求新的天气信息')
      // 更新温度
      this.temperature = '15℃'
    },
    // 城市选择器改变事件
    cityChange() {
      this.temperature = ''
    }
  }
}
</script>

以上代码意思是：当用户选择不同的城市时，会执行一个watch监听函数，这个监听函数会请求服务器获取新数据更新页面上的温度信息，同时cityChange方法会在城市选择器改变时清空temperature。