Breaking News: Grepper is joining You.com. Read the official announcement!

ref vs reactive in Vue 3

Excited Elephant answered on August 24, 2022 Popularity 9/10 Helpfulness 1/10

answer ref vs reactive in Vue 3

related ref vs reactive in Vue 3

ref vs reactive in Vue 3

Comment

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

Popularity 9/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: reactive ref whatever

Link to this answer
Share Copy Link

Contributed on Aug 24 2022

Excited Elephant

0 Answers Avg Quality 2/10

Closely Related Answers

ref vs reactive in Vue 3

Comment

<template>
  <div>
    <h2 ref="titleRef">{{ formattedMoney }}</h2>
    <input v-model="delta" type="number">
    <button @click="add">Add</button>
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue";

export default {
  setup(props) {
    // State
    const money = ref(1);
    const delta = ref(1);

    // Refs
    const titleRef = ref(null);

    // Computed props
    const formattedMoney = computed(() => money.value.toFixed(2));

    // Hooks
    onMounted(() => {
      console.log("titleRef", titleRef.value);
    });

    // Methods
    const add = () => (money.value += Number(delta.value));

    return {
      delta,
      money,
      titleRef,
      formattedMoney,
      add
    };
  }
};
</script>

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 24 2022

Excited Elephant

0 Answers Avg Quality 2/10

ref vs reactive in Vue 3

Comment

const person = reactive({
  name: 'Albert',
  age: 30,
  isNinja: true,
});

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: reactive reactiv

Link to this answer
Share Copy Link

Contributed on Aug 24 2022

Excited Elephant

0 Answers Avg Quality 2/10

ref vs reactive in Vue 3

Comment

setup() {
    const blog = reactive({ posts: [] });
    return { blog };
}
getBlogPosts() {
    this.blog.posts = await fetchBlogPosts();
}

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 24 2022

Excited Elephant

0 Answers Avg Quality 2/10

ref vs reactive in Vue 3

Comment

setup() {
    const blogPosts = ref([]);
    return { blogPosts };
}
getBlogPosts() {
    this.blogPosts.value = await fetchBlogPosts();
}

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 24 2022

Excited Elephant

0 Answers Avg Quality 2/10

ref vs reactive in Vue 3

Comment

const name = ref('Albert');
const age = ref(30);
const isNinja = ref(true);

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 24 2022

Excited Elephant

0 Answers Avg Quality 2/10

ref vs reactive in Vue 3

Contents

More Related Answers

ref vs reactive in Vue 3

Closely Related Answers

ref vs reactive in Vue 3

ref vs reactive in Vue 3

ref vs reactive in Vue 3

ref vs reactive in Vue 3

ref vs reactive in Vue 3

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.