vue2 组合APi使用

兴起随意写，还是有蛮多地方没考虑到的

有愿意一起讨论学习的可以+我哈

vomposition2其实是这个的第一个版本但是名字取错了，哈哈

不过在多人协作上不能够很好的知道是否有覆盖其挂载的方法。

推荐在不同入口定义的方法,能够加上namespace前缀来命名。

api

Vcomposition2,V2Init

用来包裹传递对象,会在上面挂载一个root和cd属性

cd用来模拟computed

其余属性都将挂载到root上

Vcomposition2 >> new Vcomposition2(vueInstance);

ref ---> v2.ref("value", "张三");

reactive ---> v2.reactive({age: 24,name:'xxn'});

events

示例

//生命周期可以嵌套使用
onCreate(()=>{ 
 
 const v2 =   new  Vcomposition2(this);
 const {root} = v2;
 
 /**
  * ref和reactive通过$set实现
  * 不过$set设置完会通知父属性的dep通知watch更新
  * 这里暂时没深入考虑
 */
 const name = v2.ref("name",18);

 //等于正常挂载在methods上的方法
 const setName = (value)=> {
     root.name = value;
 }

 //onUnMounted and onDestroyed 不会挂载返回的方法
 return {
    setName
 }
})

onCreate ---> created

onMounted(使用方式同onCreate) --> mounted

onUnMounted --> beforeDestroy

onDestroyed --> destroyed

onWatch ---> vue.$watch

onComputed

//将会挂载到实例上的cd属性
v2.onComputed("nameSuffix", () => {
    return root.value + "谢谢你";
});

use 可以传入Array的方法泛型 再或者传入单个Funtion 或者链式使用

//类似useHook使用

/**
 * this指向的是vue实例
 * @param {Vcomposition2} ctx Vcomposition2的实例
 * @param {object} root ctx下的root
*/
function useInput(ctx,root){

    ctx.ref("inputValue","")

    const setInput = (value) =>{
        
        root.inputValue  = value;
     //or this.root.inputValue = value
    }

    return {
        setInput
    }

}

onCreate(()=>{ 
 
 const v2 =   new  Vcomposition2(this);
 
 v2.use(useInput);//将代码更加细化
})