rebornszoro的博客

Composition API 模板Ref本章节使用单文件组件语法作为代码示例。本文假定你已经阅读了Composition API 介绍和响应性基本原理。在初次接触Composition API之前应先阅读它们。在使用Composition API时，响应式ref与模板ref的概念是统一的。为了获得模板内的元素或者组件实例的引用，我们可以像往常一样，声明一个ref并在setup()里返回它：<template> <div ref="root">Thi..

Composition API Provide/Inject本文假定你已经阅读了Provide/Inject，Composition API介绍和响应性基本原理。我们在使用Composition API的时候，我们也可以使用provide/inject。二者都只能在setup()内部使用当前活动实例进行调用。背景假设我们需要重构下面这段代码，里面有一个MyMap组件，这个组件通过Composition API，向MyMarker子组件provide了用户的location。&l..

组件的provide/inject阅读本篇之前应当先阅读组件基础。通常当我们需要将数据从父组件传递到子组件时，我们通过props实现。 设想一下这样的一个组件结构，这个结构中有一些嵌套层级很深的组件，我们想在内嵌层级很深的一个子组件中，调用顶层父组件的某些数据。在这种情况下，如果我们仍需要通过prop从父组件到子组件之间的组件链中传递数据，这可能挺烦人的。为了应对这种情况，我们可以使用provide与inject的组合。父组件可以无视组件层级的深度，作为所有子组件的依赖提供者。这个特性基于两

Composition API 生命周期钩子阅读本篇内容之前，应先阅读Composition API 介绍以及响应性基本原理。你可以通过在生命周期添加“on”的前缀来访问一个组件的生命周期钩子 。下面这个表格描述了如何在setup()内调用生命周期钩子：选项 API setup内部的钩子 beforeCreate 不需要 created 不需要 beforeMount onBeforeMount mounted onMounted befor

Composition Api Setup本章节使用单文件组件语法作为代码示例本篇指南假定你已经阅读了Composition Api介绍和响应性基本原理，首次接触Composition Api之前应阅读它们。参数setup方法接受2个参数：props context接下来将深入了解每个参数各自的用法。Propsprops是setup方法的第一个参数。就像你在标准的组件中所期待的那样，setup方法中的props是响应式的，并且在新的props被传递进来时将被更新。..

响应性基本原理声明响应式状态我们可以通过reactive方法，从一个JavaScript对象创建一个响应式状态：import { reactive } from 'vue'// reactive stateconst state = reactive({ count: 0})reactive方法与vue2.x中的Vue.observable()是相同的，只不过为了避免与RxJS的observables混淆，所以换了个名字。在这里，这个方法返回的是一个响应式对象，当中的响应式转换

IntroductionWhy Composition API?阅读此部分内容之前，你需要先熟悉vue的基础以及如何创建组件通过使用vue组件，我们可以将接口中的某些重复的部分，以合适的方式组合成可复用的代码，而使得我们的应用更具可维护性和灵活性。但当我们的应用变得越来越庞大时，例如调用了上百个组件，仅仅靠这是还不够的。在处理这种庞大的应用时，共享、复用代码变得尤为重要。设想一下，我们要在一个应用中展示某个用户的仓库列表，并且要有搜索和过滤的能力。这个应用可能长这样：// src/