setup的两个注意点

setup的执行时机

setup的执行时机，setup在beforeCreate之前执行一次，this为undefined。

• main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app')

• App.vue

<template>
  <HelloWorld/>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: 'App',
  components:{
    HelloWorld
  }
}
</script>

• HelloWorld.vue

<template>
  <h1>个人信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
</template>

<script>
import {reactive} from "vue";

export default {
    name:"HelloWorld",
    beforeCreate(){
        console.log("---beforeCreate---");
    },
    setup(){
        console.log("---setup---",this);
        let person = reactive({
            name:"张三",
            age:18
        });

        return {
            person
        }
    }

}
</script>

• 启动应用，测试效果
  

setup的参数

setup(props,context){}

• props，是一个对象，该对象包含的属性是 组件外部传递过来的，且组件内部声明接收 的属性。
• context，上下文。
  • attrs，是一个对象，该对象包含的属性是 组件外部传递过来的，且组件内部没有声明接收 的属性。
  • slots，组件收到的插槽内容。
  • emit，分发自定义事件的函数。

看个具体的例子。

• main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app')

• App.vue

<template>
  <HelloWorld @test="showInfo" msg1="hello" msg2="world">
      <div>北京冬奥</div>
      <template v-slot:mascot>
          <div>冰墩墩</div>
          <div>雪容融</div>
      </template>
  </HelloWorld>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: 'App',
  components:{
    HelloWorld
  },
  methods:{
    showInfo(){
      console.log("some info");
    }
  }
}
</script>

• HelloWorld.vue

<template>
  <h1>个人信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h3>{{msg1}}</h3>
  <h3>{{msg2}}</h3>
  <div>
    <slot></slot>
    <slot name="mascot"></slot>
  </div>
  <button @click="handleClick">点我一下</button>

</template>

<script>
import {reactive} from "vue";

export default {
    name:"HelloWorld",

    props:["msg1"],

    emits:["test"],

    setup(props,context){
        console.log("props",props);
        console.log("context.attrs",context.attrs);
        console.log("context.slots",context.slots);

        let person = reactive({
            name:"张三",
            age:18
        });

        function handleClick(){
            context.emit("test");
        }
        return {
            person,
            handleClick
        }
    }

}
</script>