Vue3的setup函数

setup函数

• setup用于定义变量和方法
• ref用于声明简单数据类型，如：String Number Boolean
• reactive用来声明复杂数据类型，如：Array Objec
• 是使用Composition API的入口
  • Composition API的主要思想，将它们定义为从新的setup函数返回的JavaScript变量，而不是从组件的功能（如：data、methods、computed等）定义为对象的属性
  • Composition API 代替 Vue Mixins （解决命名冲突、隐式依赖、代码重用等问题）
• 在生命周期beforeCreate前被调用（执行setup时，组件实例尚未被创建）
• 可以返回一个对象，这个对象的属性会被合并到渲染上下文，可以在模板中直接使用
• 也可以返回一个渲染函数，如：return () => h(‘div’, [count.value, object.foo])
• 在setup中没有this
• 接收props作为第一个参数，如果props为对象，可通过watchEffect监视其变化
• 接收context作为第二个参数，这个对象包含attrs、slots、emit三个属性
• context非响应式，可以直接解构使用 setup(props,{attr,slots,emit}){}
• 执行setup函数时可以访问：props、attrs、slots、emit，不可以访问：data、computed、methods

import { ref, reactive, toRefs, isRef } from 'vue'

export defalut {
  props:{
    title: String
  },
  setup( props, context ){
    console.log(props.title); // 不能直接解构
    const { title } = toRefs(props)
    let count = ref(0) // 声明简单数据类型
    console.log(count.valeu); 
    console.log(isRef(count)); // 判断是否为ref创建出来的对象
    let arr = reactive([1,3,5,7,9]) // 声明复杂数据类型
    let addOne = () => {
      count.value++ // 想改变或获取值 必须 xxx.value
    }

    // Attribute(非响应式对象)
    console.log(context.attrs)

    // 插槽(非响应式对象)
    console.log(context.slots)

    // 触发时间（方法）
    console.log(content.emit)

    return { // 必须返回 模板中才能使用
      count, arr, addOne
    }
  }
}

使用setup语法糖

<template>
  <div>
    <p>
      <span @click="update(count-1)">-</span>
      {{ count }}
      <span @click="update(count+1)">+</span>
    </p>
  </div>
</template>

<script lang="ts" setup name="component-name">
  import { ref, reactive, toRefs, isRef } from 'vue'
  let count = ref(0)
  function update(value) {
    count.value = value
  }
</script>