Vue3官网-可复用&组合式API（十一）组件式API介绍（官网API ref、toRef、toRefs）、Setup（es6解构、props、context、attrs slots emit）

最新推荐文章于 2025-03-18 14:15:27 发布

ChrisP3616

最新推荐文章于 2025-03-18 14:15:27 发布

阅读量1.4k

点赞数 3

分类专栏：前端工程师1——汇总前端工程师7——Vue3、Router、CLI、VueX 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_43456781/article/details/120434961

版权

Vue3官网-组合式API（十一）组件式API介绍（官网API ref、toRef、toRefs）、Setup（es6解构、props、context、attrs slots emit）

文章目录

Vue3官网-组合式API（十一）组件式API介绍（==官网API== ref、toRef、toRefs）、Setup（es6解构、props、context、attrs slots emit）

总结：
补充
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

truthy（真值）：在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。括号内都是假值falsy。

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

==Event.preventDefault方法取消浏览器对当前事件的默认行为。==比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了；再比如，按一下空格键，页面向下滚动一段距离，使用这个方法以后也不会滚动了。该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

vue：用组件（app.component）构建一个模板（template），并反复使用模板
父组件、子组件
const app = Vue.createApp({
          
  components: {
          
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
上面代码中app为父组件，ComponentA和ComponentB为子组件

context.emit

父组件通过 :data="data" 传递数据

父组件通过 @fun="fun" 传递方法

子组件通过 props 接收父组件传递的值

子组件通过 $emit 调用父组件的方法并传递数据
Vue中美元$符号的意思

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

vue中$refs的作用？

当我们需要获取一个dom元素进行操作的时候可以利用原生js的getElementByXxx 而在vue中可以设置refs来获取这个dom元素

第三方网站

greensock API(GSAP)：是一套用于所有主流浏览器中制作高性能html5动画的工具。他们有一个很棒的 ease visualizer，帮助你建立精心制作的画架。

GSAP的全名是==GreenSock Animation Platform，这个名字是有些怪异（官网还在各种安利你加入它的Club），但它的确是一个从flash时代一直发展到今天的专业动画库。==参照优快云：https://blog.youkuaiyun.com/weixin_39939012/article/details/80833073

animate.css ：集成第三方 CSS 动画库

CSS Triggers ：来查看哪些属性会在动画时触发重绘。这个网站是用来告诉开发者不同内核浏览器对css属性修改的重绘/回流情况，开发者知道了这些细节可以提高页面性能。

JavaScript钩子

添加 :css="false"，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。

解构（Destructuring）

ES6允许按照一定模式从数组和对象中提取值，然后对变量进行复制，这被称为解构（Destructuring）

API参考

https://v3.cn.vuejs.org/api/refs-api.html#ref
组件式API介绍
setup组件选项
setup 选项是一个接收 props 和 context 的函数
// 在我们的组件内
setup (props) {
          
  let repositories = []
  const getUserRepositories = async () => {
          
    repositories = await fetchUserRepositories(props.user)
  }
此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
带 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
换句话说，ref 为我们的值创建了一个==响应式引用==（而不是值传递，正因为是引用才可以做到响应式？）。在整个组合式 API 中会经常使用引用的概念。
将第一个逻辑关注点中（原始代码中数字1的部分）的几个部分移到了 setup 方法中
  setup (props) {
          
    const repositories = ref([])
    const getUserRepositories = async () => {
          
      repositories.value = await fetchUserRepositories(props.user)
    }

    return {
          
      repositories,
      getUserRepositories
    }
在 setup 内注册生命周期钩子

生命周期包括不同阶段

初始化 (create)— 组件挂载(mount)-----组件更新 (update)— 销毁(destroy)

组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on：即 mounted 看起来会像 onMounted。

watch 响应式更改

包含三个参数

一个想要侦听的响应式引用或 getter 函数

一个回调

可选的配置选项
toRefs
在我们的 setup 的顶部使用了 toRefs。这是为了确保我们的侦听器能够根据 user prop 的变化做出反应。
// 在我们组件中
setup (props) {
          
  // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用
  const {
           user } = toRefs(props)

  const repositories = ref([])
  const getUserRepositories = async () => {
          
    // 更新 `prop.user` 到 `user.value` 访问引用值
    repositories.value = await fetchUserRepositories(user.value)
  }
   onMounted(getUserRepositories)

  // 在 user prop 的响应式引用上设置一个侦听器
  watch(user, getUserRepositories)
独立的computed属性
将两个独立的代码块提取到组合式函数useUserRepositories中
现在我们有了两个单独的功能模块，接下来就可以开始在组件中使用它们了（这就是组合式API的妙用——简洁、可复用）：
Setup// src/components/UserRepositories.vue
import useUserRepositories from '@/composables/useUserRepositories'
import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch'
import {
           toRefs } from 'vue'
-----------------------------------------------
const {
          
      searchQuery,
      repositoriesMatchingSearchQuery
    } = useRepositoryNameSearch(repositories)
Setup

参数

props

context
props
解构 prop
属性唯一无需选择时，可以在 setup 函数中使用 toRefs 函数来完成此操作：
import {
           toRefs } from 'vue'

setup(props) {
          
  const {
           title } = toRefs(props)

  console.log(title.value)
}
属性不唯一可以选择时，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：
import {
           toRef } from 'vue'
setup(props) {
          
  const title = toRef(props, 'title')
  console.log(title.value)
}
context

context 是一个普通的 JavaScript 对象，它暴露组件的三个 property：

context.attrs

https://blog.youkuaiyun.com/qq