基于vite初始化项目
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
项目生成之后,编写一个计数器组件,修改App.vue
里面的内容:
<template>
<button @click="change">count is: {
{
count }}</button>
</template>
<script>
export default {
setup () {
let count = 0
const change = () => count++
return {
count, change }
}
}
</script>
现在要介绍的第一个API就是setup函数。setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。
1、调用时机
创建组件实例,然后初始化 props ,紧接着就调用setup 函数。从生命周期钩子的视角来看,它会在 beforeCreate 钩子之前被调用。
2、模板中使用
如果 setup 返回一个对象,则对象的属性将会被合并到组件模板的渲染上下文。
3、渲染函数 / JSX 中使用
setup 也可以返回一个函数,函数中也能使用当前 setup 函数作用域中的响应式数据:
import {
h, ref, reactive } from 'vue'
export default {
setup() {
const count = ref(0)
const object = reactive({
foo: 'bar' })
return () => h('div', [count.value, object.foo])
}
}
4、参数
该函数接收 props 作为其第一个参数,注意 props 对象是响应式的,第二个参数提供了一个上下文对象,从原来 2.x 中 this 选择性地暴露了一些 property。
const MyComponent = {
setup(props, context) {
context.attrs
context.slots
context.emit
},
}
在 App.vue
中,点击事件绑定了 change
,然后修改了 count
,但是页面并没有发生改变,这是因为 setup
函数返回的对象中 count
不是响应式数据,那么如何创建响应式数据呢?此时就要掌握响应式系统 API,我们可以使用 ref
创建。
<template>
<button @click="change">count is: {
{
count }}</button>
<!-- <button @click="change">count is: {
{
count.value }}</button> -->
</template>
<script>
import {
ref } from 'vue'
export default {
setup () {
let count = ref(0) // { value: 0 }
const change = () => count.value++
return {
count, change }
}
}
</script>
接受一个参数值并返回一个响应式且可改变的 ref
对象。ref
对象拥有一个指向内部值的单一属性 .value
。
当 ref
作为渲染上下文的属性返回(即在 setup()
返回的对象中)并在模板中使用时,它会自动解套,无需在模板内额外书写 .value
Vue自体にはすでに「ref」の概念があります。ただし、テンプレート内のDOM要素またはコンポーネントインスタンス(「テンプレート参照」)を取得するためだけです。新しい参照システムは、ロジック状態とテンプレート参照の両方に使用されます。