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>