vue3 CompositionAPIdemo createApp setup setup有2个参数第一个参数prop

demo

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">
  x:{{position.x}}
  y:{{position.y}}
</div>

<script type="module">
  import { createApp, reactive } from 'vue'

  const app = createApp({
    setup() {
      const position = reactive({
        x: 0,
        y: 0
      })
      return {
        position
      }
    },
    mounted() {
      this.position.x = 100

    }
  })
  console.log(app);
  app.mount('#app')
</script>

createApp

createApp 用于创建vue实例。
第一个参数是根组件。第二个可选参数是要传递给根组件的道具。
function createApp(rootComponent: Component, rootProps?: object): App

setup

setup 是CompositionAPI的入口 setup有2个参数

第一个参数props，用来接收外部传递的参数。是一个响应式对象，不可被解构
第二个参数context，它有3个成员，attrs，emit，slots setup返回一个对象可以用在模板，methods，computed以及声明周期的钩子函数中。setup在props解析完毕到组件实例创建之前执行, 所以在setup中无法通过this获取组件实例，此时setup中的this指向undefined

reactive

用于创建响应式对象的方法并且该对象的深层次对象也会被转成响应式对象，返回Proxy对象。需要手动导入使用方法：

import { reactive } from 'vue'
reactive(这里传入需要响应式的对象)

返回Proxy对象

生命周期 onMounted

onMounted 相当于 mounted，只不过用法不一样, onMounted接收一个函数使用方法

import {omMounted } form 'vue'
onMounted(() => {})

reactive Tips

通过reactive处理的对象会转换成响应式对象，但是不能进行解构，因为进行解构操作相当于重新声明变量进行赋值，那么此时解构出来的值并不是响应式的

上图解构出来的 x和y 并不是响应式的

解决办法：使用toRefs API

toRefs

toRefs 将响应式对象的属性也转换成响应式的，toRefs 规定接收的对象必须是代理对象也就是Proxy对象，如果不是会报警告

ref

和reactive不同，ref将基本类型数据包装成响应式对象如果给ref传入对象，内部会通过reactive返回一个代理对象如果给ref传入基本类型，内部会创建一个value属性的对象，该对象的属性有get和set，get中收集依赖，set中触发更新

总结

reactive 将一个对象转换成响应式对象（是一个代理对象）
toRefs 可以把一个代理对象内部的属性也转换成响应式对象
ref 将基本类型转换成响应式对象