a: { b: "hello" } } watcher a.b compile observe render getter setter dep/observer a dep/observer b <html>… <body> <p>hello</p> </body> </html> collect dependencies append to target element data template document fragment target element
vnode vm.a.b = 'world' { a: { b: "world" } } getter setter dep/observer a dep/observer b notify render functions text p text p _vnode {render:function(){with(this){ return _h(_e('p'),[(_s(a.b))])} }}, staticRenderFns:[] } scheduler euqueue run callback
:class="class1"> <header>header</header> <p>{{a.b}}</p> <footer>footer</footer> </div> { render: function(){with(this){ return _h(_e('div', {class:class1}), [_m(0), _h(_e('p'), [(_s(a.b))]), _m(1)]) }}, staticRenderFns: [function(){with(this){ // _m(0) return _h(_e('header'), [_t("logo")])} }, function(){with(this){ // _m(1) return _h(_e('footer', [_t("foo")])} }] } template render functions compile When first rendering completed, results of staticRenderFns is cached in Vue instance. in later, use the this cached in the patch header div p footer text text text
control of rendering with JavaScript • Cannot get no satisfaction to vue.js compiler • Cannot get no satisfaction to template DSL syntax • However, need to understand about the virtual-dom