• VUE3-38-组合式 API 渲染机制和优化
  虚拟 DOM 现在我们知道了侦听器是如何更新组件的，你可能会问这些更改最终是如何应用到 DOM 中的！ 也许你以前听说过虚拟 DOM，包括 Vue 在内的许多框架都使用这种方式来确保我们的接口能够有效地反映我们在 JavaScript 中更新的更改 我们用 JavaScript 复制了一个名为 Virtual Dom 的 DOM，我们这样做是因为用 JavaScript 接触 DOM ...
  2021-08-02 13:01:55 | VUE
• 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