Compare vue2 0, Vue3 is most different in that data() becomes setup()

setup is a new configuration item in Vue3. The value is a function

The data and methods used in the component shall be configured in setup

There are two return values of the setup function:

1. If you want to return an object, the properties, methods and in the object can be used directly in the template

2. If you return a rendering function: you can customize the rendering content (just learn about it)

<template>
  <h1>Student information</h1>
  <h2>full name:{{ name }}</h2>
  <h2>Age:{{ age }}</h2>
  <button @click="sayHello">Point me</button>
</template>

<script>
// import { h } from "vue";
export default {
  name: "App",
  //Here is just a test of setup, and the problem of responsiveness is not considered for the time being
  setup() {
    //data
    let name = "Zhang San";
    let age = 10;

    //method
    function sayHello() {
      alert(`I am ${name},this year ${age}Years old,How do you do!`);
    }

    //Return an object (common)
    return {
      name,
      age,
      sayHello,
    };

    //Returns a function (render function)
    // Return() = > H ("H1", "Silicon Valley");
  },
};
</script>

Note:

1. Try not to mix with Vue2 configuration

• The methods and properties in setup can be accessed in vue2 configuration
• However, vue2 configuration (data, method, computed.) cannot be accessed in setup
• If there are duplicate names, setup takes precedence

2. setup cannot be an async function, because the return value is no longer the return object, but promise. The template cannot see the attributes in the return object

However, you can also return a promise instance later, but you need the cooperation of susense and asynchronous components

App components:

<template>
  <div class="app">
    <h3>I am App assembly</h3>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>Loading....</h3>
      </template>
    </Suspense>
  </div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
  name: "App",
  components: { Child },
};
</script>

child component

 async setup() {
      let sum = ref(0)
      let p = new Promise((resolve,reject)=>{
         setTimeout(() => {
             resolve({sum})
         }, 3000);
      })
      return await p
  }

Parameters received by Vue3

props: the value is an object, including the attributes passed from the outside of the component and accepted by the internal declaration of the component

Props is a responsive data wrapped in Proxy. When a new props is passed in, it will be updated

It should be noted that since props is responsive, the Es6 structure cannot be used because it will eliminate the responsiveness of props. If you need the structure props, you can use the toRef function in the setup function to do this

context: is an ordinary js object, that is, it is not responsive and can be deconstructed using ES6

export default {
     setup(props,{attrs,slots,emit}) {}
}

App components:

<template>
  <Demo @hello="showHelloMag" msg="How do you do" school="Shang Silicon Valley">
    <template v-slot:qwe>
      <span>Shang Silicon Valley</span>
    </template>
    <template v-slot:asd>
      <span>Shang Silicon Valley</span>
    </template>
  </Demo>
</template>

<script>
import Demo from "./components/demo.vue";
export default {
  name: "App",
  components: { Demo },
  setup() {
    function showHelloMag(value){
      alert(`Hello, you triggered it hello Event, the parameters I receive are: ${value}`)
    }
    return {showHelloMag}
  }
};
</script>

<style>
</style>

 demo.vue component

<template>
  <h1>A person's information</h1>
  <h2>full name:{{ person.name }}</h2>
  <h2>Age:{{ person.age }}</h2>
  <button @click="test">The test triggers a Demo Component Hello event</button>
  <hr />
  <h2>{{ msg }}</h2>
  <h2>{{ school }}</h2>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Demo",
  props: ["msg", "school"],
  emits: ["hello"],
  setup(props, context) {
    // console.log("I am props", props);
    // console.log("I am context", context);
    // console.log("---setup---", context.attrs); // Equivalent to $attrs in Vue2
    // console.log('---setup---',context.emit) / / trigger the custom event.
    // console.log("---setup---", context.slots); // slot 
    let person = reactive({
      name: "Zhang San",
      age: 18,
    });
    function test() {
      context.emit("hello", 666);
    }
    return {
      person,
      test,
    };
  },
};
</script>

<style>
</style>

Summary:

1. There is no this in the setup function, because the setup function is executed before beforeCreated, and this points to undefined
2. setup itself cannot be an asynchronous function
3. The await method can be executed in setup to deal with asynchronous problems
4. The setup function accepts two parameters, props and context (the context contains three parameters attrs, slots and emit), and the context can be deconstructed