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、掌握每个生命周期内部可以做什么事情?