关于$refs知识点重读

最新推荐文章于 2024-09-23 10:09:01 发布

原创最新推荐文章于 2024-09-23 10:09:01 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#VUE #refs

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨Vue3的组合式API，包括为何引入这一新特性以及如何使用setup选项、ref、响应式变量、生命周期钩子和watch功能。同时，介绍了Vue3的响应性系统，讲解了如何声明和跟踪响应式状态，以及Proxy在响应式追踪中的作用。

2.2.3.在setup内注册生命周期钩子

2.重温Vue官网：组合式 API

2.1.为什么会出现组合式 API？

1.通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段，尤其是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应用时，共享和重用代码变得尤为重要；

2.这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的；

2.2.如何使用组合式 API？

2.2.1.新增setup组件选项

1.新的setup选项在组件创建之前执行，一旦props被解析，就将作为组合式API的入口；

2.在setup中避免使用this，因为它不会找到组件实例；

3.setup被调用发生在data、computed、methods被解析之前，所以它们无法在setup中被获取；

4.setup选项是一个接收props和context的函数；

5.setup返回的所有内容都暴露给组件的其余部分(计算属性、方法、生命周期钩子等等)以及组件的模板；

2.2.2.带ref的响应式变量

1.Vue3.0新增一个ref函数，使任何响应式变量在任何地方起作用；

2.ref接收参数，并把参数包裹在一个带有value属性的对象中并返回该对象，然后使用者可以使用该 value属性来访问或更改响应式变量的值；

2.2.3.在setup内注册生命周期钩子

1.为了使组合式API的功能和选项式API一样完整，我们还需要一种在setup中注册生命周期钩子的方法；

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

3.这些函数接受一个回调，当钩子被组件调用时，该回调将被执行，即当在 `mounted` 时调用，回调setup里面的onMounted；

4.通俗来讲，就是把Vue的生命周期回调函数，可以在setup中找到一一对应的回调函数；

2.2.4.watch响应式更改

1.Vue 3.0的vue中新增watch函数；

2.watch函数接受3个参数：一个想要侦听的响应式引用或 getter函数、一个回调、可选的配置选项；

2.2.5.独立的computed属性

1.与ref、watch类似，也可以使用从Vue导入的computed函数在Vue组件外部创建计算属性；

2.2.6.其他

这些函数接受一个回调函数，当钩子被组件调用时将会被执行；

3.重温Vue官网：响应性

3.1.什么是响应性

let val1 = 2

let val2 = 3

let sum = val1 + val2

所谓的响应性，就是当你修改val1，或者val2，或者val1和val2的时候，sum能自动刷新；

3.2.Vue如何知道哪些代码在执行

1.Vue通过一个函数的包裹器来跟踪当前正在运行的函数，在函数被调用之前就启动跟踪；

2.Vue知道哪个副作用在何时运行，并能在需要时再次执行它；

3.3.Vue如何跟踪变化

1.当我们从一个组件的 data 函数中返回一个普通的 JavaScript 对象时，Vue 会将该对象包裹在一个带有 get 和 set 处理程序的 Proxy 中。Proxy 是在 ES6 中引入的，它使 Vue 3 避免了 Vue 早期版本中存在的一些响应性问题；

2.Proxy 是一个对象，它包装了另一个对象，并允许你拦截对该对象的任何交互；

3.使用 Proxy 的一个难点是 this 绑定。我们希望任何方法都绑定到这个 Proxy，而不是目标对象，这样我们也可以拦截它们。值得庆幸的是，ES6 引入了另一个名为 Reflect 的新特性，它允许我们以最小的代价消除了这个问题；

3.4.声明响应式状态

1.reactive 相当于 Vue 2.x 中的 Vue.observable() API，为避免与 RxJS 中的 observables 混淆因此对其重命名。该 API 返回一个响应式的对象状态。该响应式转换是“深度转换”——它会影响传递对象的所有嵌套 property；

2.Vue 中响应式状态的基本用例是我们可以在渲染期间使用它。因为依赖跟踪的关系，当响应式状态改变时视图会自动更新；

3.这就是 Vue 响应性系统的本质。当从组件中的 data() 返回一个对象时，它在内部交由 reactive() 使其成为响应式对象。模板会被编译成能够使用这些响应式 property 的渲染函数；