1、Setup（https://cn.vuejs.org/api/composition-api-setup.html）

• 1、setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在setup函数中是无法 使用 data 和 methods 中的数据和方法的。
• 2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了undefined。
• 3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

const app = Vue.createApp({
    methods:{
      handleChange(){
        alert('change');
      }
    },
    template: `<child @change="handleChange">parent</child>`
   
  });
  app.component('child',{
    template: `<div @click="handleClick">123123</div>`,
    setup(props, context) {
      const { h }=Vue;
      const { attrs, slots, emit } = context;
      function handleClick(){emit('change')}
      return{ handleClick }
    }
  })
  const vm = app.mount('#root');

2、setup函数的两个参数

• props: props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup函数中如果需要使用属性时，可以直接通过props参数获取，而不再需要再通过this去获取了。

• context: 我们也称之为是一个SetupContext，它里面包含有三个属性：

• （1）attrs：里面包含了所有的非props属性。
• （2）slots：父组件传递过来的插槽。
• （3）emit：当我们组件内部需要发出事件时会用到emit。

3、setup既然是一个函数 ，那么它也会有返回值，它的返回值是用来做什么的呢 ？

• （1）setup的返回值便是在template模板中被使用。
• （2）也就是说我们可以通过setup的返回值来替代data选项（但是当setup和data选项同时存在时，使用的是setup中的数据）

4、setup使用生命周期函数

const app = Vue.createApp({
    setup() {
      const {
        ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated,
        onRenderTracked, onRenderTriggered
      } = Vue;
      const name = ref('dell')
      onBeforeMount(() => {
        console.log('onBeforeMount')
      })
      onMounted(() => {
        console.log('onMounted')
      })
      onBeforeUpdate(() => {
        console.log('onBeforeUpdate')
      })
      onUpdated(() => {
        console.log('onUpdated')
      })
      // 每次渲染后重新收集响应式依赖
      onRenderTracked(() => {
        console.log('onRenderTracked')
      })
      // 每次触发页面重新渲染时自动执行
      onRenderTriggered(() => {
        console.log('onRenderTriggered')
      })
      const handleClick = () => {
        name.value = 'lee'
      }
      return { name, handleClick }
    },
    template: `
      <div @click="handleClick">
        {{name}}
      </div>
    `,
  });
  const vm = app.mount('#root');