Summary of key knowledge of vue

Vue instance

Each Vue instance will proxy all properties in its data object: vm.a===data.a //true

Note Only these proxied properties are responsive.

If you add new properties to the instance after the instance is created, it will not trigger a view update.

In addition to the data attribute, Vue instances expose some useful instance properties and methods. These properties and methods are prefixed with $ to distinguish them from the agent's data property.

Template syntax

Using {{}} binding in v-html will become the following, will not be compiled, and will be treated directly as a string:

Data binding uses js expressions

Filter

computed

Computed vs Methods

Computed properties are cached based on their dependencies. Computed properties are only re-evaluated when their associated dependencies change. This means that as long as the message has not changed, multiple accesses to the reversedMessage calculated property will immediately return the previous calculated result without having to execute the function again.

Computed vs Watched

Setting the setter

Using fullname directly means calling the getter. When assigning a value to fullname, the setter is called.

watch option

This is useful when you want to perform asynchronous operations or expensive operations in response to data changes.

In the official example, using the watch option allows us to perform an asynchronous operation (access an API), limit how often we perform the operation, and set intermediate states before we get the final result.

This is something that calculated properties cannot do.

Dynamic binding class and style and how to add dynamic class when using components

Automatically add prefix

When v-bind:style When using CSS properties that require specific prefixes, such as transform, Vue.js will automatically detect and add the corresponding prefix.

Conditional rendering

The v-else element or the v-else-if element must immediately follow the v-if Or after the v-else-if element - otherwise it won't be recognized.

Use key to manage reusable elements

Vue will render elements as efficiently as possible, usually reusing existing elements rather than rendering them from scratch.

v-showThe difference is that elements with v-show will always be rendered and remain in the DOM. v-show simply toggles the element's CSS property display .

Note that v-show does not support

The above is the detailed content of Summary of key knowledge of vue. For more information, please follow other related articles on the PHP Chinese website!