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賦值為「暫無性別信息」。