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