dignitas123

<script setup>
  import { ref } from 'vue';
  
  const color = ref('blue')
  const changeColorToRed = () => {
    color.value = 'red'
  }
</script>

<template>

dignitas123

<script setup lang="ts">
import { ref } from 'vue';
  
const welcome = ref('Hello Mom');
const count = ref(0);
const increaseCount = () => {
  count.value++;
}
increaseCount();
</script>

dignitas123

async setup() {
  onCreated(() => console.log('Server side created, let\'s get data.'));
  const data = await fetchData();
  onMounted(() => console.log(`We have the data -{$data.metaInformation}`)); // can now be called
}

dignitas123

<script setup>
  import { useContext } from 'vue'const
  { expose } = useContext()
  const collapsed = ref(true)
  const toggleNavbar = () => {
    collapsed.value = !collapsed.value;
  }
  expose({ toggleNavbar }) // only this is visible to parent component
</script>

dignitas123

const welcome = ref("hello");
const counter = ref(0);
const scope = effectScope();
scope.run(() => {
  const doubled = computed(() => counter.value * 2);
  watchEffect(() => welcome.value = welcome.value + counter.value;
});
setTimeout(() => { welcome.value = "Nothing to update anymore" }, 10000; scope.stop();
console.log("Doubled value is", doubled.value)
// after 10 seconds you will not be able to read the value of doubled anymore

dignitas123

<ul v-for="member of members" :key="member.id"
    v-memo="[member.name, member.id == selectedUser]">
  <li>
    <span :class="{ selected: selectedUser == member.id }">{{ user.name }}</span>
  </li>
</ul>

dignitas123

<ul v-for="member of members" :key="member.id" v-memo="[member.name]">
  <li>{{ member.name }}</li>
</ul>