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接收到相应属性变化是,执行对应的更新函数,更新视图。