SOURCE

const state={
    count:0
}

const reducer=(prevState,action)=>{
    switch(action){
        case 'inc':
        return {count:prevState.count++}
        case 'dec':
        return {count:prevState.count--}
        default:
        return prevState
    }
}
//实现
function app({el,model,view,actions}){
    const wrappedAcctions={}
    Object.keys(actions).forEach(key=>{
        const originalAction=actions[key]
        wrappedAcctions[key]=()=>{
            const nextModel=originalAction(vm.model)
            vm.model=nextModel
            //通过改造actions,使用到了vm.model,具有响应性。
        }
    })
const vm=new Vue({
    el,
    data:{
        model
    },
    render(h){
        return view(h,this.model,wrappedActions)
        //如果wrappedActions为actions,则click时改变的为app函数调用中的count,无响应性。
    }
})

}



app({
    el:'#app',
    model:{
        count:0
    },//2model
    actions:{
        inc:({count})=>({count:count+1}),
        dec:({count})=>({count:count-1}),
    },
    view:(h,model,actions)=>h('div',{attrs:{id:'app'}},[
        model.count,'',h('button',{on:{click:actions.inc}},'+'),
        h('button',{on:{click:actions.dec}},'-')
        //这里的model通过this指向变为vue实例中的model,而不是2model,因此具有响应性。
        //这里的view是一个函数,model,actions取决于实际传入。
    ])

})
console 命令行工具 X clear

                    
>
console