Vue API Styles in Tutorial
Vue offers two API styles: Options API and Composition API. The tutorial is designed to work with both styles. Users can choose their preferred style using the API Preference switches at the top of the tutorial interface.
tutorial/api-styles
17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
ref automatic unwrapping in templates
When accessing a ref in templates, you do not need to use the .value property; it is automatically unwrapped for more succinct usage.
Composition API setup() function returning state
In Composition API, a component's state should be declared inside its setup() function, and returned using an object. Properties in the returned object will be made available in the template.
Composition API setup() example code
setup() { const counter = reactive({ count: 0 }) const message = ref('Hello World!') return { counter, message } } This example shows how to declare reactive state in the setup() function and return it as an object to make it available in the template.
Options API data option
In the Options API, reactive state is declared using the data component option, which should be a function that returns an object.
Options API data example with SFC
export default { data() { return { message: 'Hello World!' } } } This example shows how to declare reactive state in an SFC using the Options API data option.
Options API data example with createApp
createApp({ data() { return { message: 'Hello World!' } } }) This example shows how to declare reactive state in the HTML API using the Options API data option with createApp().
reactive() API behavior and limitations
State that can trigger updates when changed is considered reactive. The reactive() API creates JavaScript Proxies that work like normal objects. reactive() only works on objects, including arrays and built-in types like Map and Set.
reactive() example code
import { reactive } from 'vue' const counter = reactive({ count: 0 }) console.log(counter.count) // 0 counter.count++ This example shows how to import and use reactive() to create a reactive counter object.
ref() API accepts any value type
ref() can take any value type and create an object that exposes the inner value under a .value property, unlike reactive() which only works on objects.
ref() example code
import { ref } from 'vue' const message = ref('Hello World!') console.log(message.value) // "Hello World!" message.value = 'Changed' This example shows how to import and use ref() to create a reactive reference to a string value.
Difference between ref and reactive
ref() can take any value type and creates an object that exposes the inner value under a .value property. reactive() only works on objects (including arrays and built-in types like Map and Set). ref() is more flexible in accepting different value types.
this in component methods
Inside a method in the Options API, the component instance can be accessed using this. The component instance exposes data properties declared by data, and these can be updated by mutating the properties directly, such as this.count++.
Event handlers in Composition API with script setup
In Composition API with <script setup>, event handlers are declared as functions in the script. The function references variables from the script scope, including refs. For example: const count = ref(0); function increment() { count.value++ }
Methods option in Options API
In the Options API, event handlers are declared using the methods option. Methods are declared as functions in the methods object and can access the component instance using this. For example: methods: { increment() { this.count++ } }
Updating refs in Composition API
In Composition API, component state is updated by mutating refs. To update a ref value, access the value property: count.value++.
Event handlers in Composition API setup function
In Composition API with a setup() function, methods are declared as functions inside setup() and returned from setup() to be accessible in the template. For example: setup() { const count = ref(0); function increment(e) { count.value++ } return { count, increment } }