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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值