vue基础面试题

1、vue生命周期

vue实例从创建到销毁的过程称为vue的生命周期。
beforeCreate: vue实例的挂载元素el和数据对象data还未初始化；初始化内置函数和生命周期函数。

console.log(this.$el); // undefined
console.log(this.$data); // undefined

created: 挂载元素el还没有，dom未挂载；数据对象data可以访问，可做一些异步请求，对数据赋值。
beforeMount: 挂载元素el和数据对象都有了，还是虚拟dom
mounted: vue实例挂载到真实dom元素上，可以操作dom元素
beforeUpdate: 响应式数据更新时调用，发生在虚拟dom打补丁前。适合在更新前访问当前dom，比如移除已添加的事件监听器。
updated: 虚拟dom重新渲染和打补丁后调用，dom已更新，避免在此处更新数据，防止死循环。
beforeDestory: vue实例销毁前调用，此时vue实例还可以通过this访问，处理解绑事件和清除定时器等。
destoryed: vue实例销毁后调用，所以子实例也被销毁。

2、vue响应式原理（vue双向数据绑定原理）

数据劫持结合发布者订阅者模式；
数据劫持：通过object.defineProperty()（vue3中用proxy做代理）中set/get方法，对data中所有属性进行劫持监听，设置监听器Observer。
发布者：如果属性发生变化需要通知订阅者看是否需要更新，发布者是订阅者集合的管理数组，在Observer和watcher之间统一管理。
compile：指令解析器对每个节点元素扫描和解析，把相关指令初始化为一个订阅者，并替换模板数据和绑定相应函数。
订阅者：当watcher接收到相应属性变化是，执行对应的更新函数，更新视图。