Composition API(常用)

仅仅为了方便学习记录信息，未有其他用途。（采摘）

setup()

• 所有的组合API函数都在此使用, 只在初始化时执行一次
• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

setup的参数
setup(props, context) / setup(props, {attrs, slots, emit})

• props: 包含props配置声明且传入了的所有属性的对象
• attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
• slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
• emit: 用来分发自定义事件的函数, 相当于 this.$emit

---

ref () 深度 一般用来定义一个基本类型的响应式数据

const count = ref(1);
//基本类型==> 返回一个Ref对象
//用 count.value=*** 来修改值
//如果传入一个 {}  也可以,ref会自动将count.value 调用reactive方法将对象里的每个属性转成proxy对象
//通过给value属性添加getter/setter来实现对数据的劫持

---

reactive() 接收一个普通对象然后返回该普通对象的响应式代理

const count = reactive({
  name:'',
});
//基本类型==> 返回一个proxy对象 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
//用 count.name=*** 来修改值
//内部基于 ES6 的 Proxy 实现

---

toRefs() 把一个响应式对象转换成普通对象，该普通对象的每个属性都转成一个 Ref对象

<script lang="ts">
import { reactive, toRefs } from 'vue'
/*
toRefs:
  将响应式对象中所有属性包装为ref对象, 并返回包含这些ref对象的普通对象
  应用: 当从合成函数返回响应式对象时，toRefs 非常有用,这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用
*/
export default {
  name:'Home',
  setup () {
    const state = reactive({
      foo: 'a',
      bar: 'b',
    })
    const stateAsRefs = toRefs(state)
    return {
      // ...state,
      ...stateAsRefs,
    }
  },
}
</script>

---

ref 获取元素

<!--1利用ref函数获取组件中的标签元素-->
<!--2功能需求: 让输入框自动获取焦点-->
<template>
  <input type="text" ref="inputRef">
</template>
<script lang="ts">
import { onMounted, ref } from 'vue'
export default {
  setup() {
    const inputRef = ref<HTMLElement|null>(null)
    onMounted(() => {
      inputRef.value && inputRef.value.focus()
    })
    return {
      inputRef
    }
  },
}
</script>

---

计算属性 监控属性

计算属性与监视

1. computed函数:
   与computed配置功能一致
   只有getter
   有getter和setter
2. watch函数
   与watch配置功能一致
   监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
   默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
   通过配置deep为true, 来指定深度监视
3. watchEffect函数
   不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
   默认初始时就会执行第一次, 从而可以收集需要监视的数据
   监视数据发生变化时回调

<script lang="ts">
import { reactive,  ref,  computed,  watch,  watchEffect } from 'vue';
export default {
  setup () {
    const user = reactive({
      firstName: 'A',
      lastName: 'B'
    })
    // 只有getter的计算属性
    const fullName1 = computed(() => {
      return user.firstName + '-' + user.lastName
    })
    // 有getter与setter的计算属性
    const fullName2 = computed({
      get () {
        return user.firstName + '-' + user.lastName
      },
      set (value: string) {
        const names = value.split('-')
        user.firstName = names[0]+'**'
        user.lastName = names[1]+'**'
      }
    })
    const fullName3 = ref('')
    /*
    watchEffect(() => {
      fullName3.value = user.firstName + '-' + user.lastName
    })
   */
    watch(user, () => {
      fullName3.value = user.firstName + '-' + user.lastName
    }, {
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true, // 是否是深度监视, 默认是false
    })
   // watch一个数据
    watch(fullName3, (value) => {
      const names = value.split('-')
      user.firstName = names[0]
      user.lastName = names[1]
    })
    // watch多个数据:  使用数组来指定==> 如果是ref对象, 直接指定==>如果是reactive对象中的属性,  必须通过函数来指定
    watch([() => user.firstName, () => user.lastName, fullName3], (values) => { })
    return {
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
}
</script>

vue2=>vue3原理解析<===========================>Composition API(其他)