SoFunction
Updated on 2025-04-03

Some points of attention to knowledge in use

Some of the precautions and knowledge points introduced in this article have certain reference value for everyone. Let’s take a look at the detailed introduction below.

  • Each Vue instance will proxy all properties in its data object.
  • Note that only these proxy attributes are responsive. If a new property is added to the instance after the instance is created, it does not trigger a view update.
  • In addition to the data attribute, Vue instances expose some useful instance properties and methods. These properties and methods have a prefix $ to distinguish from the proxy's data attribute.

Template syntax

  • HTML-based template syntax allows developers to declaratively bind DOM to the data of the underlying Vue instance. All templates are legal HTML, so they can be parsed by standard browsers and HTML parsers.
  • On the underlying implementation, Vue compiles the template into a virtual DOM rendering function. Combined with the response system, Vue can intelligently calculate the minimum cost of re-rendering components and apply it to DOM operations when the application state changes.
  • Mustache can only have JS expressions, otherwise it will not take effect.
  • The responsibility of a directive is to apply certain behaviors to the DOM accordingly when the value of its expression changes.
  • The filter is designed for text conversion, and to implement more complex data transformations in other instructions, you should use computed properties.

Calculate properties

  • The computed attribute method will be executed once after the component beforeMount and before Mounted.
  • The calculation attribute method may have no return value. However, this property is used, that is, it is used in the template, otherwise it will not have any effect.
  • Without computing the properties, we can define an identical function in the method to replace it. For the final result, both ways are indeed the same. However, the difference is that the computed attribute is based on its dependency cache. Computed attributes will only revalue when their associated dependencies change. This means that as long as the message has not changed, multiple access to reversedMessage (a method within computed) calculation property will immediately return the previous calculation result without having to execute the function again.
  • Computed properties depend on cache; methods are cacheless and are executed once every time.
  • The computed attribute has only getter by default, but you can also provide a setter when needed. Refer to the official example:/v2/guide/#Computing-setter
  • The water method (or the vm.$watch API) is useful when you want to perform asynchronous operations or overhead operations when data changes.

Conditional Rendering

  • The difference is that elements with v-show are always rendered and kept in the DOM. v-show is a simple to switch the CSS property display of the element.
  • Generally speaking, v-if has higher switching consumption and v-show has higher initial render consumption. Therefore, it is better to use v-show if you need to switch frequently, and it is better to use v-if if the conditions are unlikely to change at runtime.
  • vue tries to render elements as efficiently as possible, often reusing existing elements instead of rendering from scratch. However, when conditional rendering, sometimes it is necessary to re-render instead of taking existing elements, so you can set a unique key to achieve no reuse of elements. Refer to the official example:/v2/guide/# Use -key-control elements to reuse

List rendering

  • When traversing an object, it is traversed according to the result of (), but it cannot be guaranteed that its results are consistent under different JavaScript engines.
  • v-for can also take integers. In this case, it will repeat the template multiple times.
  • When rendering components with v-for, data cannot be automatically passed to the components because the components have their own independent scope. In order to pass iterative data into the component, we need to use props. The reason why items are not automatically injected into the component is because this makes the component tightly coupled to how v-for works.

Form controls

  • For radio buttons, checkboxes and select list options, the value bound by v-model is usually a static string (a logical value for checkboxes).

Components

  • In Vue, a component is essentially a Vue instance with predefined options.
  • When using components, most options can be passed into the Vue constructor, with one exception: data must be a function. For reasons, because the component may be called multiple times, when data is a normal object, the data in the data will be shared. When it is a function, each component generates an independent data scope.
  • In , the relationship between parent and child components can be summarized as props down, events up . The parent component passes data downwards through props, and the child component sends messages to the parent component through events.
  • Note that in JavaScript objects and arrays are reference types, pointing to the same memory space. If prop is an object or array, changing it inside the child component will affect the state of the parent component.
  • Vue's event system is separated from the browser's EventTarget API. Although they run similarly, on and on and emit are not alias for addEventListener and dispatchEvent .
  • $refs is only populated after component rendering is complete, and it is non-responsive. It is merely a contingency solution for direct access to subcomponents—the use of $refs should be avoided in templates or computed properties.

Response principle

In the two-way binding of data in vue, the attempt can be dynamically updated only when the properties on the vue instance are changed.

When there is an attribute in data that is an object and an array, it is impossible to directly modify a certain data of the object and an array to trigger an attempt to update./v2/guide/#Precautions /v2/guide/#Change detection problem

Array solution:

(, indexOfItem, newValue);
(indexOfItem, 1, newValue)

The object can only be used in the first way.

Summarize

The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.