前言

这么多天投的简历石沉大海，有点慌了，但是今天有朋友和我分享了他的经历，我觉得我现在的经历于他而已不值一提
不曾入过地狱，我心仍向光明！我想，还是心理承受能力还是太差，那就继续充电吧，铃兰！

组合式API

虽然vue组件的能力很强了，但是在处理一些实际中的开发问题，还欠缺一些能力，别问我缺啥，我不知道哈哈哈emmm~

前提

在进入之前我们需要了解2个知识（响应性API）

reactive
ref

reactive

返回对象的响应式副本
使用：newobject = reactive({property:xx })
访问：newobject.property
例子：

const obj = reactive({ count: 3 })
obj.count // 3

ref

基础：接受一个值并返回一个响应式且可变的 ref 对象，只有一个属性 .value

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

toRef
给已存在或者不存在的源属性对象创建一个新的ref变量，响应式的，
不是很懂这个的意义，官方这样说的：即使源 property 不存在，toRef 也会返回一个可用的 ref。这使得它在使用可选 prop 时特别有用，可选 prop 并不会被 toRefs 处理。

使用：newobject = toRef(object,object.property)，
访问：newobject.value来访问属性
例子

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

toRefs ，用来解构什么的
将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的
使用：newobject = toRefs（响应式object）
访问：newobject.property.value
例子

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
const { foo } = toRefs(state) //解构

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

setup

使用：set(props,context)，context为js对象
注意：
执行 setup 时，只能访问以下 property：
props
attrs
slots
emit

以下组件选项将不能访问：
data
computed
methods
refs (模板 ref)

结合模板使用

如果 setup 返回一个对象，那么该对象的 property 以及传递给 setup 的
props 参数中的 property 就都可以在模板中访问到：

<template>
  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    props: {
      collectionName: String
    },
    setup(props) {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // 暴露给 template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

此外可以通过expose来访问setup中方法，

import { h, ref } from 'vue'
export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}

其实我在想，把方法复写成对象不就行了，expose估计就是这样的原理吧

其他：

Teleport

<teleport> 可以让我们控制在dom的哪个节点渲染模板的内容。

使用：<teleport to="node"> </teleport>
node可以是id或者class选择器（#xx或者.xx，也可以是node名字如：h，bode等）

mixin

mixin呢，额就是一个包含任意组件选项的对象，如data，methods，props等，
使用：在一个组件中使用mixin，将会把同名的对象合并了，如果有同名的数据，将以组件自身的保持。
通过下面的例子就能比较清楚的了解mixin，以下为局部注册，一般不全局注册mixin：

const myMixin = {
  methods: {
    foo() {
      console.log('foo')
    },
    conflicting() {
      console.log('from mixin')
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  methods: {
    bar() {
      console.log('bar')
    },
    conflicting() {
      console.log('from self')
    }
  }
})

const vm = app.mount('#mixins-basic')

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

此外还有一个自定义选项合并策略，在app.config.optionMergeStrategies中设置一个函数来控制
自定义的属性，可以默认一个方法或者属性。暂时没有用到，就不详细讲了。

感受

今天还看了渲染函数，插件，以及一些响应式原理的东西，有点懵逼，反正没有弄懂
额，渲染函数好像是vue处理模板的默认操作，这好像是涉及到了vue的源代码了emmm
去查了一下vue的学习路线，似乎该了解的都了解了，该学习vue cil，router，vuex什么的了
router的话以前vue2的时候学过，应该是node的那一套吧，然后之前uniapp也用过，感觉是差不多的
希望明天的学习顺顺利利的！