preface

⭐️ the main content of this column is ✍🏼, the learning process of “Vue3 official Document”

⭐️ This column is suitable for people: Vue xiaobai, learn a Vue dig friends 👨🏼 ️

⭐️ This column is read in the same order as the official document 📖

⭐️ heroes do not ask the source, this column must let you harvest full 🥳!

⭐️ meditation, practice, insist, consolidate, return with full load 🥰!

⭐️ welcome to chat in the comments section 🤡

This section

• data
• methods

Chapter 5 Data and Methods

Section 1 Data Property

What is a property?

const datas = {
  // property
  data() {
    return { count: 4}}}const app = Vue.createApp(datas)	// Application instance

const vm = app.mount('#app')	// Component instance
Copy the code

The data in the property can be accessed through the component instance’s $data

vm.$data.count	/ / 4
vm.count	/ / 4

// Changing vm.count also updates $data.count
vm.count = 5
vm.$data.count	/ / 5

// The reverse is the same
vm.$data.count = 6
vm.count / / 6
Copy the code

The property of the component instance is only added to $data when it is first created. We can directly add a new property not included in data to the component instance, but the property added to the component instance is not in the reactive $data object. So the newly added property does not have responsive properties

We initialize properties that do not provide the required value with null, undefined, or other placeholder values in the object returned by the data function.

Vue uses the $prefix to expose its own built-in API through component instances. It also reserves the _ prefix for the inner property. You should avoid using top-level data property names that start with these two characters.

Why is data a function and not an object? This is also a common interview question.

When creating a component instance, Vue will determine whether data is a function or not. If it is a function, it will return a new data. The idea of closure is also adopted here to solve the problem of data pollution. This allows data in one component instance to have the same variable name as data in another component instance, without the problem of array contamination

The vue root component may not be a function, but this is not recommended because there is only one instance of the root component and you do not create more than one. Therefore, data in the root component may not use functions.

Section 2 Methods

Add methods to the component instance using a Methods Property, which should be an object containing the required methods

Vue automatically binds methods to this so that it always points to component instances. This ensures that the method keeps the correct this pointing when used as an event listener or callback function. You should avoid using arrow functions when defining methods because it prevents the Vue from binding the appropriate this pointer.

Methods in methods are usually used as event listeners.

If you want to change data or trigger an asynchronous process, you should use hook functions instead.

Anti-shake and throttling

If the component is used only once, you can apply anti-shake directly in Methods

If a component is reused multiple times, you can add a shake-proofing function to the Created hook function

conclusion

Column synchronization code:Github ⎋

Nuggets community:Learn Vue3 with me

About the author:

A small business student full of strange knowledge, in school ing, know some design, know some typesetting, to become an excellent front-end engineer and efforts.