import { createApp, h, reactive } from 'vue';

const App = {
  render() {              // render函数类似于template: `<div><span>李老板</span></div>`
    return h(
      'div', {            // h函数里面的第二个参数为一些变量或者方法
        onClick: () => {
          console.log('click');
        }
      }, [
        h('span', '李老板');
      ]
    );
  },
  setup() {               // 在生命周期内只执行一次，且在beforeCreate之前就执行
    const state = {
      name: '涂涂',
      age: 20
    }

    // 把需要进行响应式的数据用reactive包裹起来并生成一个响应式对象(在这里响应式已经达成)，类似于data
    let person = reactive(state);

    return {              // 返回对象的属性（方法）将来会和render函数的上下文合并
      person              // （也就是说在render函数里面访问数据就是返回的响应式对象）
    }
  }
};

createApp.mount('#app', App)

import { createApp, reactive, ref } from 'vue';

const App = {
  template: `<div @click='onClick'>{{ person.age }}</div>`,
  setup() {               // 只执行一次，且在beforeCreate之前就执行
    const state = {
      name: '涂涂',
      age: 20
    }

    // 把需要进行响应式的数据用reactive包裹起来并生成一个响应式对象，类似于data
    let person = reactive(state);

    function onClick() {
      person.age +=1;
    }

    return {              // 返回的对象将来会和render函数的上下文合并
      person,             // （也就是说在render函数里面访问数据就是返回的响应式对象）
      onClick
    }
  }
};

createApp.mount('#app', App)

import { createApp, reactive, ref } from 'vue';

const App = {
  template: `<div @click='onClick'>{{ age }}</div>`,
  setup() {               // 只执行一次，且在beforeCreate之前就执行

    // 把原始值(单值)转化为为响应式对象
    const age = ref(0);

    function onClick() {
      age.value +=1;
    }


    return {              // 返回的对象将来会和render函数的上下文合并
      age,            
      onClick
    }
  }
};

createApp.mount('#app', App)

import { createApp, reactive, ref } from 'vue';

const App = {
  template: `<div @click='onClick'>{{ age }}</div>`,    // 使用了toRefs方法就可以直接用age，而不是person.age
  setup() {               // 只执行一次，且在beforeCreate之前就执行
    const state = {
      name: '涂涂',
      age: 20
    }

    // 把需要进行响应式的数据用reactive包裹起来并生成一个响应式对象，类似于data
    let person = reactive(state);

    function onClick() {
      person.age +=1;
    }

    return {              // 返回的对象将来会和render函数的上下文合并
      ...toRefs(person),  // 是把person响应对象先脱壳，暴露出原始数据，再对每个原始数据实行ref包装
      onClick
    }
  }
};

createApp.mount('#app', App)