Setup
语法:
Setup(props,context){}
setup 函数会在 beforeCreate 之后、created 之前执行
注意:在 setup() 函数中无法访问到 this
参数:
1:props:是响应式的,当传入新的 prop 时,它将被更新(因为
props
是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性)export default { props: { title: String }, setup(props) { console.log(props.title) } }
需要销毁 prop (可以通过使用
setup
函数中的 toRefs 来安全地完成此操作)import { toRefs } from 'vue' setup(props) { const { title } = toRefs(props) console.log(title.value) }
2:context(是一个普通的 JavaScript 对象,它暴露三个组件 property,它不是响应式,可以对它进行解构)
export default { setup(props, context) { // Attribute (响应式 object) console.log(context.attrs) // Slots (响应式 object) console.log(context.slots) // Emit 事件 (方法) console.log(context.emit) } }
解构写法
export default { setup(props, { attrs, slots, emit }) { ... } }
attrs
和slots
是有状态的对象,在组件本身更新时总是更新它们。这意味着你应该避免对它们进行解构,并始终将属性引用为attrs.x
或slots.x
。如果你打算根据
attrs
或slots
更改应用副作用,那么应该在onUpdated
生命周期钩子中执行此操作。
- npm i -g @vue/cli
- vue create mydemo
- 接下来按回车,安装
列子1
reactive()函数接收一个普通对象,返回一个响应式的数据对象。
<template>
<div class="hello">
<div>{{ readersNumber }} {{ book.title }}</div>
</div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
name: "HelloWorld",
setup() {
const readersNumber = ref(1);
const book = reactive({ title: "Vue 3" });
// expose to template
return {
readersNumber,
book,
};
},
};
</script>
注意,从 setup
返回的 refs 在模板中访问时是 Ref 展开,因此不应在模板中使用 .value
列子2
<template>
<div class="hello">
</div>
</template>
<script>
import { h, ref, reactive } from "vue";
export default {
name: "HelloWorld",
setup() {
const readersNumber = ref(0);
const book = reactive({ title: "Vue 3" });
// Please note that we need to explicitly expose ref value here
return () => h("div", [readersNumber.value, book.title]);
},
};
</script>
在 setup()
内部,this
不会引用活动的实例,因为在解析其他组件选项之前调用了 setup()
,因此 this
内部 setup()
的行为与其他选项中的 this
完全不同。
生命周期钩子、生命周期2x、生命周期3x
选项 API | Hook inside inside setup |
---|---|
beforeCreate | Not needed* |
created | Not needed* |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted |
errorCaptured | onErrorCaptured |
renderTracked | onRenderTracked |
renderTriggered | onRenderTriggered |
TIP:
setup
是围绕beforeCreate
和created
生命周期钩子运行的,所以不需要显式地定义它们。
<template>
<div class="hello"></div>
</template>
<script>
import { onMounted, onBeforeMount } from "vue";
export default {
name: "HelloWorld",
setup() {
onBeforeMount(() => {
console.log("Component is onBeforeMount!");
});
// mounted
onMounted(() => {
console.log("Component is mounted!");
});
},
};
</script>
provide和inject、使用 Provide、提供/注入 (Provide / Inject)
//HellowWorld.vue
<template>
<div class="hello">
<MyMarker />
</div>
</template>
<script>
import { provide, reactive, ref, readonly } from "vue";
import MyMarker from "./MyMarker.vue";
export default {
components: {
MyMarker,
},
setup() {
const location = ref("North Pole");
const geolocation = reactive({
longitude: 90,
latitude: 135,
});
provide("location", readonly(location));
provide("geolocation", readonly(geolocation));
},
};
</script>
//MyMarker.vue
<template>
<div>
{{userLocation}}---{{userGeolocation.longitude}}---{{userGeolocation.latitude}}
</div>
</template>
<script>
import { inject } from "vue";
export default {
setup() {
const userLocation = inject("location");
const userGeolocation = inject("geolocation");
return {
userLocation,
userGeolocation
};
},
};
</script>