vue3 notes

1. Declarative Rendering

By expanding on the standard HTML template syntax, we can use it based on the JavaScript to describe the state of the HTML What it should look like. When the state changes, theHTML It will be updated automatically.

1.1 reactive()

Applies to objects (includingarraysand built-in types)

1.2 ref()

Can accept any value type

ref will return a wrapped object with the .value Expose internal values under the attribute.

Note that the template we accessed in the message ref It is not necessary to use the .value: It will be automatically unpacked, making it easier to use.

(Use it directly in the template, remember to add the .value in the script.)

The contents of the double curly braces are not limited to identifiers or paths——We can use any valid JavaScript Expressions.

2.templatesquote

That is, it points to the template of a DOM elemental ref。

<p ref="pElementRef">hello</p>

To access the reference, we need to declare a reference of the same name to the ref：

const pElementRef = ref(null)

Watch this. ref utilization null value to initialize. This is because when the <script setup> At the time of execution, theDOM element does not yet exist. Template references ref Can only be used in the componentmountPost-access.

3. Life cycle

4. Listening

5. Parent-child component passing parameters

5.1 Parent component to child component parameter props





const props = defineProps({



    data_: {



        default: {},



        type: Object,



    },



});

take note of defineProps() is a compile-time macro and does not need to be imported. Once declared, themsg prop It can then be used in the templates of subcomponents. It can also be used in subcomponent templates via the defineProps() The object returned is in the JavaScript Middle Access.