深入理解Vue
文章平均质量分 69
实现一些简单手写Vue
XUPT-前端在逃工程师
逃
展开
-
keep-alive实现原理
LRU缓存-keep-alive实现原理keep-alive是Vue.js的一个内置组件。它能够将不活动的组件实例保存在u内存中,而不是直接销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。简单地说,keep-alive用于保存组件的渲染状态,避免组件反复创建和渲染,有效提高系统性能。keep-alive的max属性,用于限制可以缓存多少组件实例,一旦这个数字达到了上限,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉LRU缓存淘汰算法LRU缓存淘汰算法:根据数原创 2021-12-14 13:53:21 · 1477 阅读 · 0 评论 -
Vue中$nextTick原理
1.$nextTick作用如下图例子,文本改变后,响应式数据处理后,在mouted中获取到box高度都是0 <div id='app'> <div class='box'> {{msg}} </div> </div> <script> let app = new Vue( { el: '#app', data: { msg: ''原创 2021-10-20 22:51:45 · 1674 阅读 · 0 评论 -
Vue解析指令源码
使用new来实例化vue对象时,去compile解析指令从而初始化视图//实例化vue对象class MVue{ constructor(options){ this.$el = options.el; this.$data = options.data; this.$options = options; if(this.$el){ //1.实现一个数据观察者 //2.实现一个指令解析器 new Compile(this.$el,原创 2021-10-06 11:05:58 · 246 阅读 · 0 评论 -
Vue响应式数据原理
在学习Vue响应式数据原理之前,需要先了解一下 Object.defineProperty() 这个方法1.Object.defineProperty()参数一:要定义属性的对象参数二:要定义或修改的属性的名称参数三:要定义或修改的属性描述符注意:get和set不能和其他属性一起使用var obj = {};var val = null;Object.defineProperty(obj ,'a',{ //value:10, //设置值 //configurable:true, //原创 2021-10-07 15:35:24 · 200 阅读 · 0 评论