学习vue3系列第一课-CFANZ编程社区

基于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 元素或组件实例 (“模板引用”)。新的 ref 系统同时用于逻辑状态和模板引用。