Vue.js 中如何判断对象是否存在属性

一、从JS判断对象属性是否存在

在使用Vue.js开发过程中，我们很可能需要判断一个对象是否存在某个属性。在JS中，可以使用in关键字来判断对象是否存在某个属性。

const obj = {
    name: '张三',
    age: 20,
    gender: '男'
}
console.log('name' in obj);  // true
console.log('address' in obj);  // false 

在上面的代码中，我们定义了一个对象obj，包含三个属性name、age、gender。使用in关键字，可以得知name属性存在于obj中，而address属性不存在于obj中。

二、判断对象中是否存在某个属性

在Vue.js开发中，我们需要判断一个对象是否存在某个属性。Vue提供了$set方法来做这件事情。

this.$set(target, key, value)

其中，target是要设置的对象，key是要设置的属性名，value是要设置的属性值。

举个例子：

data() {
  return {
    person: {
      name: '张三',
      age: 20
    }
  }
},
mounted() {
  if (!this.person.hasOwnProperty('gender')) {
    this.$set(this.person, 'gender', '男')
  }
}

上面的代码中，我们在mounted生命周期函数中判断person对象是否存在gender属性，如果不存在，则通过$set方法给person对象添加了一个gender属性，值为“男”。

三、使用v-if进行判断

在Vue.js开发时，我们也可以使用v-if指令来判断某个属性是否存在。

<div v-if="person.gender">
  {{ person.gender }}
</div>
<div v-else>
  暂无性别信息
</div>

在上面的代码中，我们使用了v-if指令来判断person对象是否存在gender属性，如果存在，则输出gender的值，否则输出“暂无性别信息”。

四、使用$refs对元素进行操作

有时候我们需要对一个元素进行操作，但是该元素还未被渲染。这时，我们就需要用到$refs来判断该元素是否存在。

<template>
  <div>
    <input type="text" ref="myInput" v-model="keyword">
    <button @click="handleClick">搜索</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword: ''
      }
    },
    methods: {
      handleClick() {
        if (this.$refs.myInput) {
          this.$refs.myInput.focus()
        }
      }
    }
  }
</script>

在上面的代码中，我们给一个input元素添加了ref=”myInput”属性，通过$refs.myInput来判断该元素是否存在。如果存在，则聚焦该元素，否则不做任何操作。

五、使用$watch监听属性变化

Vue.js还提供了一个$watch方法，可以监听一个对象的属性变化。当该属性变化时，$watch会自动执行相应的回调函数。通过监听属性变化，我们也可以判断一个对象是否存在某个属性。

export default {
  data() {
    return {
      person: {
        name: '张三',
        age: 20
      },
      gender: ''
    }
  },
  watch: {
    'person.gender'(val, oldVal) {
      if (!val) {
        this.gender = '暂无性别信息'
      } else {
        this.gender = val
      }
    }
  }
}

在上面的代码中，我们通过$watch方法监听了person.gender属性的变化。如果person.gender属性不存在，则会给this.gender赋值为“暂无性别信息”。