它以其简洁、灵活和高效而闻名,而 Vue 3 引入的新特性 ref 更是让这一切更加得心应手。本文将深入探讨 Vue 3 中的 ref,从基本概念到深层原理,以及实际应用中的各种技巧和注意事项。 ref 的基本概念 在Vue 3 中,ref 是一个用于创建响应式数据对象的API。它允许我们在 Vue 的组合式 API(Composition API)中...
从上面的代码可以看到实际是调用RefImpl类new了一个对象,传入的第一个参数是rawValue,也就是ref绑定的变量值,这个值可以是原始类型,也可以是对象、数组等。 接着将断点走进RefImpl类中,在我们这个场景中简化后的RefImpl类代码如下: classRefImpl{ private_value: T private_rawValue: Tconstructor(value) {this....
toRef可以响应对象Object,其针对的是某一个响应式对象(reactive封装)的属性prop。 toRef和对象Object两者保持引用关系,即一个改完另外一个也跟着改。 toRef如果用于普通对象(非响应式对象),产出的结果不具备响应式。如下代码所示: //普通对象conststate = {age:20,name:'monday'}//响应式对象conststate =reactive...
classRefImpl<T> {private_value: Tprivate_rawValue: T// 存储原始值,用于比对变化publicdep:Dep=newSet()// 依赖集合public__v_isRef =true// 标识是 ref 对象constructor(value: T) {this._rawValue= value// 如果值是对象,用 reactive 包裹this._value=isObject(value) ?reactive(value) : value }...
在Vue3 新推出的响应式API中,Ref 系列毫无疑问是使用频率最高的 api 之一,而 computed 计算属性是一个在上一个版本中就非常熟悉的选项了,但是在 Vue3 中也提供了独立的 api 方便我们直接创建计算值。而今天这篇文章,笔者就会给大家讲解 ref 与 computed 的实现原理,让我们一起开始本章的学习吧。
constcount= ref(0) console.log(count)// { value: 0 } console.log(count.value)// 0 count.value++ console.log(count.value)// 1 但是ref 如果应用在 template 中,不需要对 ref 进行解包,也就是不需要使用.vue。 <setup> import{ ref }from'vue' ...
log('refCount ', refCount ) const refObject = ref({ value: 0 }) // 引用类型 console.log('refObject ', refObject ) 看一下结果: 我们都知道 reactive 是通过 ES6 的 Proxy 来实现的,基础类型的 ref 显然和 Proxy 没啥关系,而引用类型的 ref 是先把原型变成 reactive, 然后再挂到 value 上面...
而如果ref函数接收到引用类型，_value中存储的是转化后的Proxy Object代理对象，通过代理对象的属性来实现...
// 这样，无论是哪种类型的数据，ref 都可以提供响应式的 value 属性，// 使得数据变化可以被 Vue 正确追踪和更新。// export const toReactive = (value) => isObject(value) ? reactive(value) : value }get value() {// 追踪依赖，这样当 ref 的值发生变化时，依赖这个 ref 的组件或副作用函数...
function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) { // ...target是原始值/响应式对象的处理 // target是原始对象的处理 const proxy = new Proxy(target, targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers); ...