Setup

❝

Vue官方文档：https://cn.vuejs.org/guide/extras/composition-api-faq.html

❞

setup()

「基础使用：在setup中通过ref和reactive创建响应式数据」

<script>
import { ref, reactive } from 'vue'export default {setup() {const msg = ref('hello world')const obj = reactive({name: '高启强',age: 43})return {msg,obj}}
}
</script><template><div>{{ msg }}<p>我是{{ obj.name }}</p></div>
</template>

Props和context

props就是父组件传入的属性；context是上下文对象，里面有attrs，slots，emit，expose

父组件

<template><Child :name='obj.name' />
</template>

子组件

export default {
  props: ['name'],
  setup(props, context) {
    console.log('我是' + props.name);
    console.log(context.attrs)
    console.log(context.emit)
    console.log(context.slots)
    console.log(context.expose)
  }
}

context中的expose是做什么的？

expose官方称为：暴露公共属性，就是用来暴露给父组件的属性用的，「暴露出去的属性在父组件可以访问到，没有暴露的属性获取不到」，会是undefined。

子组件：在子组件中有name和age两个数据，只暴露出name数据

<script>
export default {props: ['name'],setup(props, { attrs, emit, slots, expose }) {const name = '张三'const age = 18// 只暴露出name，外面的组件只能获取到name，age就获取不到expose({name: name})return {name,age}}
}
</script>

父组件：父组件获取到name，获取不到age

<script>
import Child from '@/components/Child.vue'export default {components: { Child },mounted() {// 可以获取到name，获取不到ageconsole.log(this.$refs.child.name);  // 张三console.log(this.$refs.child.age);   // undefined},
}
</script><template><div><Child ref='child' /></div>
</template>

data和setup中有相同的数据时会用哪个？

当data中有一个name，setup中也有一个name时，会用哪个呢？答案是setup, 「当有相同名称的数据时候setup中的会代替data中的，也就是setup比data优先级高」

<script>
import { ref } from 'vue'
export default {data() {return {name: '高启兰',}},setup() {const name = ref('高启强')return {name}},created() {console.log(this.name);}
}
</script>

使用渲染函数h

在setup中一般是返回一个json对象，里面是data数据。但是setup也可以返回一个渲染函数。

因为返回的是渲染函数，渲染函数只是渲染当前是组件内容，没有返回其他数据。所以返回函数的话数据就只能在组件内部使用，不能在组件外部访问，因为没有return数据。

那怎么办呢？对了，可以使用expose将数据暴露出去就可以了

<script>
import { h, ref } from 'vue'export default {setup(props, { expose }) {const count = ref(0)// 此时父组件可以通过模板引用来访问这个 count 数据了。expose({count})return () => h('div', count.value)}
}
</script>