vue的面试题

1、请说一下响应式数据的原理

 // 默认vue在初始化数据时，会给data中的属性使用Object.defineProperty 重新定义所有属性,

 // 当页面取到对应属性时，会进行依赖收集（收集当前组件的watcher） 

 // 如果属性发生变化会通知相关依赖进行更新操作

 // dep.notify()  触发数据对应的依赖进行更新

Object.defineProperty();
 

2、Vue中是如何监测数组变化？

  //使用函数劫持的方式，重写了数组的方法

  // Vue将data中的数组，进行了原型链重写。

  // 指向了自己定义的数组原型方法，这样当调用数组api时，可以通知依赖更新，如果数组中包含着引用类型。

  // 会对数组中的引用类型再次进行监控。

initData

new Observer();

 

3.为何vue采用异步渲染?

 // 因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了提高性能。vue会在本轮数据更新后，再去异步更新视图。

nextTick(flushSchedulerQueue);  //在下一次tick中刷新watcher队列

//渲染节流

4、nextTick 实现原理?

 // nextTick 方法主要是使用了宏任务和微任务，定义了一个异步方法，多次调用nextTick 会将方法存入队列中，

 // 通过这个异步方法清空当前队列，所以这个nextTick就是异步方法。

 

 // 宏任务和微任务：都是异步方法，nextTick()  callbacks.push(cb)   timerFunc()  返回promise

 // flushQueue 会使用nextTick保证当前视图渲染完成。

 //vue 中的computed的特点

  // 默认computed也是一个watcher是具备缓存的，只要当依赖的属性发生变化时，才会更新视图

 

initComputed 

new Watcher()

defineComputed

createComputedGetter

 

// computed watch  method 区别

// 只要把方法用在模板上了，每次视图更新 就会重新渲染，性能开销比较大

// 计算属性 是具备缓存的 

// computed 和watch的原理  里面都是一个watcher。 唯一不同的是computd里面是具备缓存。

5、watch 中的deep:true是如何实现的？

// 当用户指定了watch中的deep属性为true时，如果当前监控的值是数组类型，会对对象中的每一项进行求值，此时会将当前watcher存入到对应属性的依赖中,

// 这样数组中对象发生变化时也会通知数据更新。

vm.$watch(expOrFn,handler,options)

// computed 内部会用在模板上的。

 

6、掌握每个生命周期内部可以做什么事情？