个人简介

Echo Blog


江湖无名 安心练剑
  • VUE3-37-组合式 API 模板引用
    模板引用 在使用组合式 API 时,响应式引用和模板引用的概念是统一的。为了获得对模板内元素或组件实例的引用,我们可以像往常一样声明 ref 并从 setup() 返回: <template> <div ref="root">This is a root element</div> </template> <script>...
    2021-08-02 13:01:55 | VUE
  • VUE3-36-组合式 API 提供/注入
    提供/注入 我们也可以在组合式 API 中使用 provide/inject。两者都只能在当前活动实例的 setup() 期间调用。 设想场景 假设我们要重写以下代码,其中包含一个 MyMap 组件,该组件使用组合式 API 为 MyMarker 组件提供用户的位置。 <!-- src/components/MyMap.vue --> <template> ...
    2021-08-02 13:01:55 | VUE
  • VUE3-35-Setup
    参数 使用 setup 函数时,它将接受两个参数: props context 让我们更深入地研究如何使用每个参数。 Props setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样,setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新 // MyBook.vue export default { props: { ...
    2021-08-02 13:01:55 | VUE
  • VUE3-34-什么是组合式 API?
    什么是组合式 API? 通过创建 Vue 组件,我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。 然而,我们的经验已经证明,光靠这一点可能是不够的,尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时,共享和重用代码变得尤为重要。 假设在我们的应用程序中,我们有一个视图来显示某个用户的仓...
    2021-08-02 13:01:55 | VUE
  • VUE3-33-响应式计算和侦听
    计算值 有时我们需要依赖于其他状态的状态——在 Vue 中,这是用组件计算属性处理的,以直接创建计算值,我们可以使用 computed 方法:它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。 const count = ref(1) const plusOne = computed(() => count.value++) consol...
    2021-08-02 13:01:55 | VUE
  • VUE3-32-响应性基础
    声明响应式状态 要为 JavaScript 对象创建响应式状态,可以使用 reactive 方法: import { reactive } from 'vue' // 响应式状态 const state = reactive({ count: 0 }) reactive 相当于 Vue 2.x 中的 Vue.observable() API ,为避免与 RxJS 中的 obse...
    2021-08-02 13:01:55 | VUE
  • VUE3-31-深入响应性原理
    深入响应性原理 现在是时候深入了!Vue 最独特的特性之一,是其非侵入性的响应性系统。 数据模型是被代理的 JavaScript 对象。而当你修改它们时,视图会进行更新。这让状态管理非常简单直观,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。 在这个章节,我们将研究一下 Vue 响应性系统的底层的细节。 什么是响应性 这个术语在程序设计中经常被提及,但这是什么意思呢?响...
    2021-08-02 13:01:55 | VUE
  • VUE3-30-plugins 插件
    插件 插件是自包含的代码,通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object,也可以是 function 插件的功能范围没有严格的限制——一般有下面几种: 添加全局方法或者 property。如:vue-custom-element 添加全局资源:指令/过滤器/过渡等。如:vue-touch) 通过全局混入来添加一些组件选项。(如vue-rout...
    2021-08-02 13:01:55 | VUE