Vue双向数据绑定原理

vue双向数据绑定

概念:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图

-> Object.defineProperty() //2.0核心语法
->数据代理
->双向绑定
-> 订阅发布模式
compile-> 模版解析 (template模版 html 指令 { {表达式}})
observer-> 观察者(订阅发布) data里的所有的属性进行 数据劫持 数据代理
watcher-> 监听 data里的所有的属性被改变之后触发



  
    
    
    
    Document
  
  
    
    


效果展示:
Vue双向数据绑定原理_第1张图片

你可能感兴趣的:(vue,vue)