响应式数据原理

模板编译原理

tempalte模版

<div id="abc">hello</div>

ast语法抽象树

{
  tag: 'div',
  type: 1
  attrs: [
    {name: "id", value: "abc"}
  ],
  children: [
    {type: 3, text: "hello"}
  ],
  parent: null,
 }

render

with(this) {
    return _c('div',{id:'abc'},_v('hello'))
}

从render生成vnode，_c、_v、_s方法都有对应的vnode结构

vnode类

 class Vnode {
  constructor(tag, data, key, children, text) {
    self.tag = tag
    self.data = data
    self.key = key
    self.children = children
    self.text = text
  }
}

拿到vnode结构，进入到_update
在_update中有patch