vue源码-发布订阅

1. vue3-proxy代理

Var data = {

name:’lisi’,

age:21,

friend:{

name1:’’tom,

age1:1

}

}

Let vm = new proxy(data,{

get(target,key){

console.log(‘get’,target[key])

return target[key]

},

set(target,key,newValue){

console.log(‘set’,newValue);

If(target[key] === newValue){

return

}

targer.[key] = newValue//数据更新

Document.querySeletor(‘#app’).textcontent = target[key]//数据

})

console.log(vm.name);

vm.age = 30

发布订阅和源码

发布订阅模式:

Let vm = new Vue()

//注册事件

//参数:事件标记(事件名称),,事件处理函数

vm.$on(‘change’,()=>{

console.log(‘event change1’);

})

vm.$on(‘change’,()=>{

console.log(‘event change2’);

})

Vm.$emit(‘change’)

源码:

//需求:任务分发

//事件中心  注册事件容器

Let eventCenter = new Vue()

//compent A:发布者 add task

Function pubTask(taskname){

eventCenter.$emit(‘task’,{task:taskname})

}

//compent B1:订阅 add task

Function getTask(){

eventCenter.$on(‘task’,(task)=>{

console.log(‘get task name’);

})

}