Vue2实现composition API的原理是什么

本篇内容主要讲解“Vue2实现composition API的原理是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue2实现composition API的原理是什么”吧!


//入口文件引入并注册
importVuefrom'vue'
importVueCompositionAPIfrom'@vue/composition-api'

Vue.use(VueCompositionAPI)


//vue文件使用
import{defineComponent,ref,reactive}from'@vue/composition-api'

exportdefaultdefineComponent({
setup(){
constfoo=ref('foo');
constobj=reactive({bar:'bar'});

return{
foo,
obj
}
}
})

怎么样，看完是不是感觉和 vue3 一模一样，你可能会想：这是 vue2 啊，我之前的 data 、methods 里面也有变量和方法，怎么做到跟 setup 返回值打通合并在一起的。vue2 不是只有定义在 data 里面的数据才会被处理成响应式的吗？ ref 和 reactive 是怎么做到的呢？vue2 响应式数据定义的约束（添加赋值原对象没有的属性，数组下标修改等），改用 ref 和 reactive 就没问题吗？当然还有很多的疑惑，因为插件提供的 API 相当多，覆盖了绝大部分 Vue3 所拥有的，这里主要从这几个问题来分析一下是如何做到的。得益于 Vue 的插件系统，@vue/composition-api 像 vue-router 、vuex 一样也是通过官方提供的插件式来注入。


//这里只贴跟本章要讲的相关代码

funcitonmixin(Vue){
Vue.mixin({
beforeCreate:functionApiInit
}
}

functioninstall(Vue){
mixin(Vue);
}

exportconstPlugin={
install:(Vue:VueConstructor)=>install(Vue),
}

Vue 插件就是向外面暴露一个 install 的方法，当调用 use 的时候会调用该方法，并把 Vue 构造函数作为参数传入，然后调用 Vue.mixin 混入对应钩子时要处理的函数。接下来主要看下 functionApiInit 做了什么


functionfunctionApiInit(this:ComponentInstance){
constvm=this
const$options=vm.$options
const{setup,render}=$options

//render相关


const{data}=$options

$options.data=functionwrappedData(){
initSetup(vm,vm.$props)
returnisFunction(data)
?(
dataas(this:ComponentInstance,x:ComponentInstance)=>object
).call(vm,vm)
:data||{}
}

因为 Vue 在 beforeCreated 和 created 生命周期之间，会 initState 对数据进行处理，其中对 data的处理时就会调用 $options.data拿到定义的数据，所以这里重新对该函数其包裹一层，这也是为什么要选择 beforeCreate 钩子注入的一个原因，必须在该函数调用前进行包裹。
接下来看 initSetup都做了什么


functioninitSetup(vm:ComponentInstance,props:Record={}){
constsetup=vm.$options.setup!
constctx=createSetupContext(vm)
constinstance=toVue3ComponentInstance(vm)
instance.setupContext=ctx

def(props,'__ob__',createObserver())
resolveScopedSlots(vm,ctx.slots)

letbinding:ReturnType>|undefined|null
activateCurrentInstance(instance,()=>{
binding=setup(props,ctx)
})

//setup返回是函数的情况需要重写render函数

constbindingObj=binding

Object.keys(bindingObj).forEach((name)=>{
letbindingValue:any=bindingObj[name]

//数据处理

asVmProperty(vm,name,bindingValue)
})
return
}
}

这个函数比较长，不在本次要讲解的主线上代码逻辑都删除了，这个函数主要是创建了 ctx 和把 vm 实例转换成 Vue3 数据类型定义的 instance ，然后执行 setup 函数得到返回值，然后遍历每个属性，调用 asVmProperty 挂载到 vm 上面，当然这里的挂载不是直接通过把属性和值添加到 vm 上面，这么做会有一个问题，就是后续对该属性的修改不能同步到 vm 中，这里采用的还是 Vue 最常见的数据代理。


exportfunctionasVmProperty(
vm:ComponentInstance,
propName:string,
propValue:Ref
){
constprops=vm.$options.props
if(!(propNameinvm)&&!(props&&hasOwn(props,propName))){
if(isRef(propValue)){
proxy(vm,propName,{
get:()=>propValue.value,
set:(val:unknown)=>{
propValue.value=val
},
})
}else{
proxy(vm,propName,{
get:()=>{
if(isReactive(propValue)){
;(propValueasany).__ob__.dep.depend()
}
returnpropValue
},
set:(val:any)=>{
propValue=val
},
})
}
}

看到这里，相信你已经明白了在 setup 中定义返回的为什么能够在 template 、 data 、 methods 等之中去使用了，因为返回的东西都已经被代理到 vm 之上了。接下来我们来说说响应式相关的，为什么 ref 和 reactive 也可以让数据成为响应式的。ref 的实现其实是对 reactive 再次封装，主要用来给基本类型使用。


functionref(raw?:unknown){
if(isRef(raw)){
returnraw
}

constvalue=reactive({[RefKey]:raw})
returncreateRef({
get:()=>value[RefKey]asany,
set:(v)=>((value[RefKey]asany)=v),
})
}

因为 reactive 接受的必须是一个对象，所有这里使用了一个常量作为 ref 的 key, 也就是


constvalue=reactive({
"composition-api.refKey":row
})


exportfunctioncreateRef(
options:RefOption,
isReadonly=false,
isComputed=false
):RefImpl{
constr=newRefImpl(options)

constsealed=Object.seal(r)
if(isReadonly)readonlySet.set(sealed,true)
returnsealed
}

exportclassRefImplimplementsRef{
readonly[_refBrand]!:true
publicvalue!:T
constructor({get,set}:RefOption){
proxy(this,'value',{
get,
set,
})
}
}

通过 new RefImpl 实例，该实例上有一个 value 的属性，对 value 做代理，当取值的时候返回 value[RefKey]，赋值的时候赋值给 value[RefKey], 这就是为什么 ref 可以用在基本类型，然后对返回值的 .value 进行操作。调用 object.seal 是把对象密封起来（会让这个对象变的不能添加新属性，且所有已有属性会变的不可配置。属性不可配置的效果就是属性变的不可删除，以及一个数据属性不能被重新定义成为访问器属性，或者反之。但属性的值仍然可以修改。）我们主要看下 reactive 的实现


exportfunctionreactive(obj:T):UnwrapRef{
constobserved=observe(obj)
setupAccessControl(observed)
returnobservedasUnwrapRef
}


exportfunctionobserve(obj:T):T{
constVue=getRegisteredVueOrDefault()
letobserved:T
if(Vue.observable){
observed=Vue.observable(obj)
}else{
constvm=defineComponentInstance(Vue,{
data:{
$$state:obj,
},
})
observed=vm._data.$$state
}

returnobserved
}

我们通过 ref 或者 reactive 定义的数据，最终还是通过了变成了一个 observed 实例对象，也就是 Vue2 在对 data 进行处理时，会调用 observe 返回的一样，这里在 Vue2.6+ 把observe 函数向外暴露为 Vue.observable，如果是低版本的话，可以通过重新 new 一个 vue 实例，借助 data 也可以返回一个 observed 实例，如上述代码。因为在 reactive 中定义的数据，就如你在 data 中定义的数据一样，都是在操作返回的 observed ，当你取值的时候，会触发 getter 进行依赖收集，赋值时会调用 setter 去派发更新，
只是定义在 setup 中，结合之前讲到的 setup 部分，比如当我们在 template 中访问一个变量的值时，vm.foo -> proxy 到 setup 里面的 foo -> observed 的 foo ，完成取值的流程，这会比直接在 data 上多代理了一层，因此整个过程也会有额外的性能开销。因此使用该 API 也不会让你可以直接规避掉 vue2 响应式数据定义的约束，因为最终还是用 Object.defineProperty 去做对象拦截，插件同样也提供了 set API 让你去操作对象新增属性等操作。到此，相信大家对“Vue2实现compositi免费云主机域名on API的原理是什么”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！