setup组件选项学习

setup学习

主要用来进行学习记录的，方便日后自我查看，如有不足，希望可以指出~
1.setup是什么
2.setup怎么用
简单点说setup就是一个组件选项，跟compute，method一样的使用方式，但是具体是什么作用呢？来，我们接着继续往下看

1.setup是什么

说到setup，我们需要先说混合模式mixin。如果对mixin还不熟悉，请戳这里

在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题：

mixin 很容易发生冲突：因为每个特性的属性都被合并到同一个组件中，所以为了避免 property 名冲突和调试，你仍然需要了解其他每个特性。

可重用性是有限的：我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。

为了解决这些问题，我们添加了一种通过逻辑关注点组织代码的新方法：组合式 API，而setup就是用来使用组合式API的组件选项

2.setup如何使用（参数的使用）

上面已经提到，setup是一个组件选项，它和生命周期钩子，data,methods,computed一样的使用方法
如下

使用setup函数时，它接受两个参数
1.props
2.context
setup(porps,context){}

props

PropsParmas组件

<template>
  <h1>
    {{title}}</h1>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'PropsParmas',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  setup (props) {
  //不能使用以下ES6对props中属性解构赋值，
    const { title } = props
  }
})
</script>

父组件引用

<PropsParmas title="父组件" />

运行结果：

改变父组件传入的title值

<PropsParmas title="父组件1" />

运行结果：

如上
随着父组件传入title的改变，页面展示效果也会对应更新，所以props参数是响应式的
因为是响应式的，所以不能进行解构，PropsParmas组件中使用了const { title } = props进行解构后，浏览器会出现以下提示，表示会失去响应性

所以对于props参数不能使用ES6对其进行直接解构赋值
正确解构方式，可以使用toRefs引用响应式

import { toRefs } from 'vue'
setup(props) {
	const { title } = toRefs(props)
	console.log(title.value)
}

2.context参数

setup(props,contex){
	// Attribute (非响应式对象)
    console.log(context.attrs)

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

    // 触发事件 (方法)
    console.log(context.emit)
}

父组件

  <PropsParmas title="父组件1" class="props-class" id="props-id" data-id="data-id">插槽</PropsParmas>

打印结果 console.log(context.attrs)

从打印结果可以看出，context.attrs是包括除props外的属性，如class，id等

context是一个JavaScript对象，不是响应式的，所以可以使用解构赋值

setup(props,{attrs,emit,slots}){
//虽然context不是响应式的，但是官网说明，最好不要使用解构赋值
}

由于setup是组件创建之前执行
可以访问的属性
props attrs slots emit
不可以访问的组件选项
computed,method,data

结合模板使用

<template>
  <div>
    {{ refData }} {{ reactiveObj.title }} {{refDataCom}}</div>
</template>

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

export default {
  setup () {
    const refData = ref(0)
    const reactiveObj = reactive({ title: 'title' })
    console.log(refData.value, 'setup--refData')
    return {
      refData,
      reactiveObj
    }
  },
  computed: {
    refDataCom: function () {
      return this.refData + 1
    }
  },
  mounted () {
    console.log(this.refDataCom, '--refDataCom')
    console.log(this.refData, '--refData')
    console.log(this.reactiveObj, '--reactiveObj')
  }
}
</script>

由组件和打印的结果看
在setup中使用ref或reactive定义的数据，需要.value
模板中可以直接使用，无需.value
其他组件选项中如上面computed,mounted中，可以直接使用this.调用，和data中返回的数据相同的使用方式

总结
对于一个复杂的功能，按照vue2.X中的实现形式，逻辑代码实现可能会比较零散，而使用了setup之后，可以将实现同一个功能的代码，放在一起，然后将返回的结果返回出去，可以供其他组件选项使用，例：method,computed,增加了代码的可读性，可维护性，更加体现了组件化
戳这里：对应官网地址