setup

Setup is executed before beforeCreate, you cannot use this because there is no component instance yet, and setup calls occur before data Property, computed Property, or methods are resolved, So they cannot be retrieved in setup.

The setup (props, context) parameters

1. The props are responsive, so they cannot be deconstructed using ES6. This will eliminate the responsiveness of prop. ToRefs can be used to setup(props) {const {title} = toRefs(props) // toRefs can be wrapped}. Context: A "normal" JS object with three attributes. Because it is a normal object, it is not reactive, so it can be deconstructed using ES6. -attrs (attribute, non-reactive object) -slots (non-reactive object) -emit (trigger event, Attrs and slots are stateful objects that are always updated with the component itself. This means you should avoid deconstructing them and always refer to properties as attrs.x or slots.x. Note that, unlike props, attrs and slots are non-reactive. If you are going to change application side effects based on attrs or slots, you should do so in the onUpdated lifecycle hook.Copy the code

Used in templates

The setup function returns an object that can be used in the template as if it were normal dataCopy the code

Returns a render function

code

The effect

Lifecycle hook functions

These hook functions accept a callback function that is executed when the hook is invoked by a component trigger

Vue2 offering \ injection

Provide and Inject (similar to Provider and Consumer in React) Scenarios: a deep component chain is nested. If a deep component wants to get the data of the top parent component, it will be difficult to pass it through props.

Suppose: Grandpa A wants to pass data to great-grandchild B

Analysis: A is the data provider, B is the consumer

Code:

Ponent ('A', {data() {return {todos: ['Feed A cat', 'Buy tickets']}}, provide: {user: 'John Doe' // to give great-grandson}, template: '<div> {{todos.length}} </div>'}) // B component app.component.ponent ('B', {inject: ['user'], created() {console.log(' Injected property: ${this.user} ') // Injected property: John Doe}})Copy the code

Suppose A wants to provide B with some “own” data, written in A slightly different way

Ponent ('A', {data() {return {todos: ['Feed A cat', 'Buy tickets']}}, provide: {todoLength: Todos. length // Cannot read property 'length' of undefined '}, template: '... Ponent ('todo-list', {data() {return {todos: ['Feed a cat', 'Buy tickets']}}, provide() {// become function! Return object! return { todoLength: this.todos.length } }, template: ` ... `})Copy the code

Vue3 provides \ injection

  • provide

  • inject

  • Adding responsiveness (using ref or Reactive)

  • Modify the data provided
    1. In principle, the data can be modified by the parent node

1. If a variable must be modified in a child component, the ancestor node provides a method that modifies the variable, and the child component injects the method and calls itCopy the code

  • Data provided cannot be modified
    • Using a readOnly

Template reference – Gets the DOM node

ref

Responsiveness foundation

reactive

In a word: Make reference data types reactive

ref

In a word: Make primitive data types reactive

Reactive state deconstruction

Use ES6 deconstruction to get the desired Proterty

Responsiveness is lost!

In: toRefs

Readonly prevents changes to reactive objects