‘sort’,
‘reverse’
]
methodsToPatch.forEach(function (method) {
// cache original method
const original = arrayProto[method]
def(arrayMethods, method, function mutator (…args) {
const result = original.apply(this, args)
const ob = this.ob
let inserted
switch (method) {
case ‘push’:
case ‘unshift’:
inserted = args
break
case ‘splice’:
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted) // 新增的数据需要进行观测
// notify change
ob.dep.notify()
return result
})
})
-
每个属性都拥有自己的
dep
属性,存放他所依赖的watcher,当属性变化后会通知自己对应的watcher去更新 -
默认在初始化时会调用render函数,此时会触发属性依赖收集
dep.depend
-
当属性发生修改时会触发
watcher
更新dep.notify()
问题核心:如何将template转换成render函数 ?
-
1.将template模板转换成
ast
语法树 -parserHTML
-
2.对静态语法做静态标记 -
markUp
diff
来做优化的 静态节点跳过diff
操作
3.重新生成代码 - codeGen
src/compiler/index.js:11
export const createCompiler = createCompilerCreator(function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
const ast = parse(template.trim(), options) // 1.解析ast语法树
if (options.optimize !== false) {
optimize(ast, options) // 2.对ast树进行标记,标记静态节点