Vue Instance Options

⚙️ What are Instance Options?

Instance options are configuration properties used to define component behavior. They include data, methods, computed properties, watchers, lifecycle hooks, and more. These options control how your component works and responds to changes.


export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

Core Options

📦

data

Component's reactive state

data() {
  return { count: 0 }
}

🔧

methods

Component functions

methods: {
  increment() {
    this.count++
  }
}

💡

computed

Cached calculated values

computed: {
  double() {
    return this.count * 2
  }
}

👀

watch

React to data changes

watch: {
  count(newVal) {
    console.log(newVal)
  }
}

🔹 data Option

Define reactive data properties for your component:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Name: {{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      name: 'Vue',
      items: ['a', 'b', 'c']
    }
  }
}
</script>

Important: data must be a function that returns an object to ensure each instance has its own data.

🔹 methods Option

Define functions that can be called from template or other methods:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse</button>
    <button @click="clearMessage">Clear</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    },
    clearMessage() {
      this.message = ''
    }
  }
}
</script>

Result:

Clicking "Reverse" changes "Hello Vue" to "euV olleH"

🔹 computed Option

Define calculated properties that are cached based on dependencies:

<template>
  <div>
    <p>Original: {{ message }}</p>
    <p>Reversed: {{ reversedMessage }}</p>
    <p>Length: {{ messageLength }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    },
    messageLength() {
      return this.message.length
    }
  }
}
</script>

Computed vs Methods: Computed properties are cached and only re-evaluate when dependencies change. Methods run every time they're called.

🔹 watch Option

Watch data changes and perform actions:

<template>
  <input v-model="question" placeholder="Ask a question">
  <p>{{ answer }}</p>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      answer: 'Questions usually contain a question mark.'
    }
  },
  watch: {
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.answer = 'Thinking...'
        this.getAnswer()
      }
    }
  },
  methods: {
    getAnswer() {
      setTimeout(() => {
        this.answer = 'The answer is 42!'
      }, 1000)
    }
  }
}
</script>

🔹 props Option

Define properties that parent components can pass:

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

<!-- Usage -->
<MyComponent title="Hello" :count="5" />

🔹 emits Option

Declare custom events the component can emit:

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  emits: ['increment', 'decrement'],
  methods: {
    handleClick() {
      this.$emit('increment', 1)
    }
  }
}
</script>

<!-- Parent usage -->
<MyComponent @increment="count += $event" />

🔹 components Option

Register components locally:

<template>
  <div>
    <ChildComponent />
    <AnotherComponent />
  </div>
</template>

<script>
import ChildComponent from './Child.vue'
import AnotherComponent from './Another.vue'

export default {
  components: {
    ChildComponent,
    AnotherComponent
  }
}
</script>

🔹 Complete Example

Combining multiple options in one component:

<template>
  <div>
    <h2>{{ fullName }}</h2>
    <input v-model="firstName" placeholder="First name">
    <input v-model="lastName" placeholder="Last name">
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  watch: {
    fullName(newName) {
      console.log('Name changed to:', newName)
    }
  },
  methods: {
    reset() {
      this.firstName = ''
      this.lastName = ''
    }
  }
}
</script>