-
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
-
VUE3-29-渲染函数
渲染函数
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。
然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。
让我们深入一个简单的例子,这个例子里 render 函数很实用。
假设我们要生成一些带锚点的标题:
<h1>
<a name="hello-world" href="#hell...
2021-08-02 13:01:55 |
VUE
-
VUE3-28-teleport
Teleport
Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部,以构建一个组成应用程序 UI 的树。
然而,有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。
一个常见的场景是创建一个包含全屏模式的组件。在大多数情况下,你希望模态的逻辑存在于组件中,但是模态...
2021-08-02 13:01:55 |
VUE
-
VUE3-27-自定义指令
简介
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。
注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。
然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
举个聚焦输入框的例子,如下:
html
<div id="simplest-directive-example"...
2021-08-02 13:01:55 |
VUE