Vue3 ref的原理解析以及实践
前言
本篇作为Vue3中ref api的讲解，希望你拥有以下知识
- 了解Vue3中的响应式原理，可参考
- 《Vue3响应式原理解析以及实践（上）》
- 《Vue3响应式原理解析以及实践（下）》
- ref的基本使用方法，可参考官网**Refs**
实现ref
有这么一段代码，
- 我们用一个副作用函数注入total的依赖
- 再用一个副作用函数注入salePrice的依赖
let product = reactive({ price:5,quantity:2 })
let salePrice = 0
let total = 0effect(()=>{total = product.price*product.quantity
})effect(()=>{salePrice = product.price*1.1
})
此时我们不难发现销售总额应当为salePrice*product.quantity,于是我们定义销售总额，并注入依赖。
let saleTotal = 0
effect(()=>{saleTotal = salePrice*product.quantity
})
但此段代码不会像我们所想的那样运行，因为salePrice并不是一个响应式变量。此时如果你熟悉Vue3Api，你应该知道这里是一个使用ref的场景。
ref
ref函数接受一个值并返回一个响应式的、可变的Ref对象。Ref对象只有一个.value属性值。
第一种实现，通过reactive方法直接实现
function ref(intialValue){return reactive({value:intialValue})
}
虽然能行，但这并不是我们以及Vue3实现所真正实现的。
对象访问器
Vue3中ref使用了一个概念对象访问器，这属于JavaScript里计算属性的概念。下面我举例说明。
let user = {firstName:'jack',lastName:'chen',get name(){return `${this.firstName} ${this.lastName}`},set name(value){[this.firstName,this.lastName] = value.split(' ')}
}
console.log(user.name)//output:jack chen
user.name = 'jony j'
console.log(user)//output {firstName:'jony',lastName:'j',
}
如上代码中，我们并没有给user对象设置name的属性。而是通过set 和get 与name属性名间的逻辑关系，从而使得了name具有了计算属性。在我们改变name的同时也同时改变了与她相关的firstName以及lastName属性。这个概念同样也在ref api内使用
简易ref源代码
function ref(raw){const r = {get value(){track(r,'value')return raw}set value(newVal){raw = newValtrigger(r,'value')}}return r
}
以上代码中我们在ref函数内新建了一个对象，并运用了对象访问器，注入了与传入值相关的依赖，并在赋值时触发依赖从而达到了响应值。关于track和trigger函数的实现可参考reactive api内的实现。在Vue3中ref用于将一个普通类型的值转换为响应式，个人感觉类似于Vue2中计算属性的含义。
End
本篇参考了源代码讲解视频，对于ref的讲解不是完全全面。实现代码为简易版。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！