vue3中Composition API-常用部分

• vue2中的html模板中必须要有一对根标签，vue3组建的html模板中可以没有根标签

• setup函数
  函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

• ref
  作用: 定义一个数据的响应式
  语法: const xxx = ref(initValue):
  创建一个包含响应式数据的引用(reference)对象
  js 中操作数据: xxx.value
  模板中操作数据: 不需要.value
  一般用来定义一个基本类型的响应式数据

• 箭头函数

//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };

//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

-reactive
作用: 定义多个数据的响应式
const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”：会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

vue2和vue3的区别

• 一开始现学的vue2，后来vue3出来之后又研究了一下，发现他们还是不一样的.
  vue3比2更强大，高效
  2里面通过 defineProperty 对对象的已有属性值的读取和修改进行劫持(监视/拦截)
  3是通过代理对象更新目标对象身上的属性值，proxy+refect就可以实现数据响应
  所以
  vue2需要为每一个属性加set和get方法，效率低
  vue3中直接代理对象+refect对象调用相关方法就行，而且是深层次监视，就是通过代理可以得到或者更改目标对象中的某个数组属性

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

emit(‘事件’, ‘++’)

• ref中访对象是在reactive中通过proxy放入对象

toRefs：把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

<template>
  <h2>App</h2>
  <h3>foo: {{ foo }}</h3>
  <h3>bar: {{ bar }}</h3>
  <h3>foo2: {{ foo2 }}</h3>
  <h3>bar2: {{ bar2 }}</h3>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'

/*
toRefs:
将响应式对象中所有属性包装为ref对象, 并返回包含这些ref对象的普通对象
应用: 当从合成函数返回响应式对象时，toRefs 非常有用，
这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

*/
export default {
  setup() {
    const state = reactive({
      foo: 'a',
      bar: 'b'
    })

    const stateAsRefs = toRefs(state)

    setTimeout(() => {
      state.foo += '++'
      state.bar += '++'
    }, 2000)

    const { foo2, bar2 } = useReatureX()

    return {
      // ...state,
      ...stateAsRefs,
      foo2,
      bar2
    }
  }
}

function useReatureX() {
  const state = reactive({
    foo2: 'a',
    bar2: 'b'
  })

  setTimeout(() => {
    state.foo2 += '++'
    state.bar2 += '++'
  }, 2000)

  return toRefs(state)
}
</script>


ref获取元素

利用 ref 函数获取组件中的标签元素

<template>
  <h2>App</h2>
 
  <input type="text" ref="inputRef" />
</template>

<script lang="ts">
import {defineComponent, onMounted, ref } from 'vue'
/*
ref获取元素: 利用ref函数获取组件中的标签元素
功能需求: 让输入框自动获取焦点
*/
export default defineComponent({
name:'App',
  setup() {
    const inputRef = ref<HTMLElement | null>(null)

    onMounted(() => {
      inputRef.value && inputRef.value.focus()
    })

    return {
      inputRef
    }
  }
})
</script>