0<script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> <template> <button @click="increment">Count: {{ count }}</button> </template>
| Step | Action | Variable State | Template Binding | Rendered Output |
|---|---|---|---|---|
| 1 | Import ref from Vue | No variables yet | No binding | N/A |
| 2 | Declare count = ref(0) | count = 0 (reactive) | count bound to template | Button shows 'Count: 0' |
| 3 | Define increment function | count unchanged | increment bound to click event | Button shows 'Count: 0' |
| 4 | User clicks button | increment() called, count.value++ | count updates to 1 | Button updates to 'Count: 1' |
| 5 | User clicks button again | count.value increments to 2 | count updates to 2 | Button updates to 'Count: 2' |
| 6 | No more clicks | count stable at 2 | No change | Button shows 'Count: 2' |
| Exit | Component remains reactive | count reactive and updated | Template reflects count | Rendered output matches count value |
| Variable | Start | After 1 Click | After 2 Clicks | Final |
|---|---|---|---|---|
| count.value | 0 | 1 | 2 | 2 |
Vue <script setup> syntax: - Use <script setup> block for concise component logic - Declare reactive refs with ref() and access via .value - Define functions directly for template events - Variables and functions auto-expose to template - Vue tracks reactivity and updates DOM automatically
<script setup> in a Vue component?<script setup>export default.export default and simplifies code. correctly states that it removes the need for export default and simplifies code.<script setup>?ref() to wrap primitive values like numbers.ref(0), which is correct. Options A, C, and D use incorrect or non-existent functions.<script setup> code, what will be rendered inside the template?<script setup>
import { ref } from 'vue'
const message = ref('Hello')
message.value = 'Hi'
</script>
<template>
<p>{{ message }}</p>
</template>value property. To display the inner value, you must use message.value in script or just message in template because Vue unwraps refs in templates.{{ message }}. Vue unwraps refs here, so it should display the string inside message.value, which is 'Hi'.<script setup>, refs are unwrapped automatically in templates, so it should display 'Hi'. The code sets message.value = 'Hi' correctly, so the output is 'Hi'.<script setup> code snippet:<script setup>
import { reactive } from 'vue'
const state = reactive({ count: 0 })
function increment() {
state.count++
}
</script>
<template>
<button @click="increment()">Increment</button>
<p>Count: {{ state.count }}</p>
</template>reactive to create a reactive object state with a count property. The increment function modifies state.count.@click="increment()" which is valid shorthand for v-on:click. The function increment is defined in <script setup> and is automatically exposed to the template.<script setup> that fetches data asynchronously when the component mounts and stores it in a reactive variable. Which is the correct way to do this?onMounted lifecycle hook to run code after the component is ready.ref(null) for reactive data. Inside onMounted, use async/await to fetch and assign data to data.value.<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(async () => {
const res = await fetch('https://api.example.com/data')
data.value = await res.json()
})
</script> correctly uses ref, onMounted, and async/await with proper assignment to data.value. <script setup>
import { reactive } from 'vue'
const data = reactive(null)
async function fetchData() {
const res = await fetch('https://api.example.com/data')
data = await res.json()
}
fetchData()
</script> incorrectly tries to assign to a reactive object directly and calls fetchData immediately without lifecycle hook. <script setup>
import { ref } from 'vue'
const data = ref(null)
fetch('https://api.example.com/data').then(res => {
data = res.json()
})
</script> assigns data instead of data.value and lacks lifecycle hook. <script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(() => {
fetch('https://api.example.com/data').then(res => res.json()).then(json => {
data.value = json
})
})
</script> uses promises correctly but <script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(async () => {
const res = await fetch('https://api.example.com/data')
data.value = await res.json()
})
</script> is cleaner and preferred with async/await.Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.