Setup function execution timing and precautions

<template>
  <div>
    <p>{{name}}</p>
    <button @click="myFn1">button</button>
    <p>{{age}}</p>
    <button @click="myFn2">button</button>
  </div>
</template>

<script>
  Setup beforeCreate: Created for the new component, data and methods for the new component have not been initialized. The component has just been created, and its data and methods have been initialized. The beforeCreate lifecycle method has not been executed yet, so data and methods cannot be used in the setup function. It directly changes the setup function "this" to "undefined". The setup function must be synchronous and not asynchronous
  import {ref} from 'vue';
export default {
  name: 'App'.data: function(){
    return {
      name: 'lnj',}},methods: {myFn1(){
      alert('abc'); }},// async setup() {
  setup() {
    let age = ref(18);
    function myFn2() {
      alert('www.it666.com');
    }

    // console.log(this); // undefined
    // console.log(this.name);
    // this.myFn1();
    return {age, myFn2}
  }
}
</script>

<style>

</style>

Copy the code