Vue3.0学习使用记录

Vue 3.0 学习使用

一、 值得注意的新特性

• 组合式 API
• Teleport
• 片段
• 触发组件选项
• 来自 @vue/runtime-core 的 createRenderer API，用于创建自定义渲染器
• 单文件组件组合式 API 语法糖 (``)
• 单文件组件状态驱动的 CSS 变量 (`` 中的 v-bind)
• SFC `` 现在可以包含全局规则或只针对插槽内容的规则
• Suspense

1.1. 组合式api

组合式api实际使用的地方：setup

1.1.1 setup

• 执行时间：组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。

  在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

• 接收参数：props、context；

• 返回：返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

// src/components/UserRepositories.vue
import { fetchUserRepositories } from '@/api/repositories'
import { ref } from 'vue'
export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: {
      type: String,
      required: true
    }
  },
  setup (props) {
      const repositories = ref([])
      const getUserRepositories = async () => {
        repositories.value = await fetchUserRepositories(props.user)
      }
      return { // 这里返回的任何内容都可以用于组件的其余部分
          repositories,
          getUserRepositories // 返回的函数与方法的行为相同
      }
  }
  // 组件的“其余部分”
}

1.1.2 带 ref 的响应式变量

ref 为我们的值创建了一个响应式引用。

ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值：

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

在任何值周围都有一个封装对象，是为了保持 JavaScript 中不同数据类型的行为统一（在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的），这样我们就可以在整个应用中安全地传递它，而不必担心在某个地方失去它的响应性。