关于vue3中setup函数的使用

<script>
export default {
  name: 'App',
  // 最为原始的对象写法是这样，但是通过es6我们可以简写
  // setup: function(){}
  setup () {
    // 数据
    let name = '黑猫几绛'
    let age = 20
    // 方法
    function sayHello() {
      console.log(`我叫${name}，我今年${age}了`)
    }
  }
}
</script>

<template>
  <h1>我叫{{name}}，我今年{{age}}了</h1>
</template>
 
<script>
export default {
  name: 'App',
  // 最为原始的对象写法是这样，但是通过es6我们可以简写
  // setup: function(){}
  setup () {
    // 数据
    let name = '黑猫几绛'
    let age = 20
    // 方法
    function sayHello() {
      console.log(`我叫${name}，我今年${age}了`)
    }
    return{
      name,
      age,
      sayHello
    }
  }
}
</script>

<script>
import {h} from 'vue'
export default {
  name: 'App',
  setup () {
    // 在页面上渲染出一个h1标签
    return ()=> h('h1', '黑猫几绛')
  }
}
</script>

# App.vue
<template>
  <Demo msg="hello" name="world" @hello="changeId">
    <template v-slot:test>
      摸鱼
    </template>
  </Demo>
</template>

# Demo.vue
<script>
export default {
    name:'Demo',
    props:['msg'],
    setup(props,context){
        console.log(props);
        console.log(context.attrs);
        console.log(context.slots);
        console.log(context.emit);
    }
}
</script>