Comprehensive inventory of ref and reactive in vue3-Vue.js-php.cn

Home

Web Front-end

Vue.js

Comprehensive inventory of ref and reactive in vue3

青灯夜游

Mar 02, 2023 pm 07:40 PM

front endvue.js

I know if you have such doubts when using Vue3, "ref and rective can create a responsive object, how should I choose?", "Why does a responsive object lose its responsiveness after destructuring? How should it be handled? ?” Today we will take a comprehensive inventory of ref and reactive. I believe you will gain something different after reading it. Let’s learn together!

Comprehensive inventory of ref and reactive in vue3

reactive()

Basic usage

We can use it in Vue3 reactive() Create a responsive object or array:

import { reactive } from &#39;vue&#39;

const state = reactive({ count: 0 })

This responsive object is actually a Proxy, Vue will use this Proxy Side effects are collected when the properties are accessed, and side effects are triggered when the properties are modified.

To use responsive state in component templates, you need to define and return it in the setup() function. [Related recommendations: vuejs video tutorial, web front-end development]

<script>
import { reactive } from &#39;vue&#39;

export default {  setup() {    const state = reactive({ count: 0 })    return {      state    }  }}
</script>

<template>
  <div>{{ state.count }}</div>
</template>

Of course, you can also use <script setup></script>,## Top-level imports and variable declarations in #