2024Vue面试题，大厂面试必备！，web开发实战，重磅分享

‘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

})

})

3.Vue中如何进行依赖收集？

---

• 每个属性都拥有自己的dep属性，存放他所依赖的watcher，当属性变化后会通知自己对应的watcher去更新

• 默认在初始化时会调用render函数，此时会触发属性依赖收集 dep.depend

• 当属性发生修改时会触发watcher更新 dep.notify()

4.如何理解Vue中模板编译原理

---

问题核心：如何将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树进行标记,标记静态节点

<