Analysis of the frequency phenomenon of ref, computed and reactive use in Vue (example details)

1. Characteristics and advantages of ref

(I) Simple and clear responsive foundation

ref is used to create responsive data of the basic data type. Its value is through.valueVisiting, this is relatively intuitive in understanding and use. This approach is easier for developers who have transitioned from traditional JavaScript development to Vue. For example, when we need to create a simple numeric type responsive data:

import { ref } from 'vue';
const count = ref(0);

We can use it directly in the templateTo update and obtain data, this simple mechanism makes it very convenient when dealing with some small, independent data responsive requirements.

(II) Good interaction with template

In Vue templates, data created by ref can be well integrated with template syntax. Although it is not necessary to use it when accessing ref data in a template.value(Vue will handle it automatically), but this automatic processing mechanism allows developers to easily bind ref data to template elements. For example,countBind to a button click event and display text:

<template>
  <button @click="++">{{ count }}</button>
</template>

This makes it quick to develop simple interactive components, especially those that only involve basic data types.

(III) Suitable for processing local data in complex components

In large and complex components, there may be a lot of local, small responsive data. ref handles these situations well, because each ref is an independent individual. For example, there are multiple buttons in a component, each with its own click count, and these independent count data can be clearly managed using ref.

2. The unique value of computed

(I) Calculation based on existing responsive data

computed is used to create computed properties based on existing responsive data. It automatically caches the calculation results based on the data it depends on. When the dependent data does not change, the computed property will return the cached value directly without recalculating, which greatly improves performance.

import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() =>  * 2);

In this example,doubleCountWill be based oncountThe value ofcountWhen unchanged, the calculation function will not be executed repeatedly. This feature is very useful when dealing with complex computational logic, especially those that rely on multiple responsive data.

(II) Efficient use in templates

In Vue templates, the computed property can be used like a normal property. This makes the template code more concise and easy to read. For example, if we want to display a formatted string calculated from other data in the template:

<template>
  <div>{{ doubleCount }}</div>
</template>

This simple way of using allows developers to easily present the results of complex calculations in templates without the need to embed a large amount of computational logic code into the templates.

(III) Support setter method to achieve two-way data binding

The computed property can also define setter methods to achieve two-way data binding. This is very useful in some scenarios where the calculation results need to be reverse updated. For example:

const fullName = computed({
  get() {
    return  + ' ' + ;
  },
  set(newValue) {
    const names = (' ');
     = names[0];
     = names[1];
  }
});

This makes computerized not only a one-way computing attribute, but also has flexible data interaction capabilities.

3. Reactive Relative Reasons

(I) Understanding the cost is high

reactive is used to create complex responsive objects, which is implemented in Proxy based on ES6. For some developers, the concept of Proxy is relatively new and it may be difficult to understand. In contrast, ref is used more closely to the use of variables in traditional JavaScript. For example:

import { reactive } from 'vue';
const state = reactive({
  count: 0,
  name: 'John'
});

In useorWhen it is available directly in templates, it is necessary to always remember in JavaScript code that this is a Proxy-based object. This potential complexity may allow developers to choose a more understandable ref in some simple scenarios.

(II) Limitations of use scenarios

Reactive is mainly used to deal with complex object structures. When the application scenario only involves simple data types or small data structures, using reactive seems a bit "insignificant". For example, if you just need a simple counter, using ref would be more appropriate. Moreover, when handling function parameter transfer, ref is more convenient if only responsive data of the basic data type is needed.

(III) Compatibility issues with some external libraries

In some cases, reactive created responsive objects may have compatibility issues with some third-party JavaScript libraries. Since these libraries may not take into account Vue's reactive mechanism, unexpected problems may arise during data interaction. When ref and computer interact with external libraries, the probability of compatibility problems is relatively low due to their relatively simple mechanism.

Although reactive plays an important role in Vue's responsive system, due to the above reasons, in actual development, we will find that the frequency of ref and computerized is higher than reactive in many scenarios. However, this does not mean that reactive is not important, and it remains an indispensable tool when dealing with complex object-level responsive requirements. Developers need to reasonably choose to use these responsive APIs provided by Vue based on specific project needs and scenarios.

This is the article about the analysis of ref, computed and reactive usage frequency phenomena in Vue. For more related content on Vue ref computed reactive usage, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!