2021年9月7日
插槽
摘要： 插槽 插槽的作用在于，为组件开放一个插口，将插入的内容替换到组件内容存留的空间 // <navigation-link>组件内内部 <a v-bind:href="url" class="nav-link"> <slot></slot> </a> //父级使用 <navigation-link> Y 阅读全文
posted @ 2021-09-07 16:33 来吃点代码 阅读(188) 评论(0) 推荐(0) 编辑
从模板到虚拟Dom 再到 DOM树
摘要： 是什么 1，虚拟dom：js直接操作dom的代价是相对昂贵的，每次操作dom都会让浏览器茶农头开始执行一遍流程， 每次更新执行一次，假若我某一次操作导致页面有10个节点更新，js直接操作dom就是10次浏览器计算， 而虚拟dom则会将10次更新对比旧代码保存在一个js对象（虚拟dom）中，然后一次性 阅读全文
posted @ 2021-09-07 15:23 来吃点代码 阅读(128) 评论(0) 推荐(0) 编辑
2021年9月6日
Vue模版编译原理 Vue事件绑定原理
摘要： Vue模版编译原理 1，将模板字符串转换成 elment ASTs (解析器) 2，对AST进行静态标注，即不需要修改的地方标注出来，后面的虚拟Dom对比时便会忽略这个，提升新能 3，将AST生成render函数 Vue事件绑定原理 原生时间是通过addEventListener来绑定的 vue是通 阅读全文
posted @ 2021-09-06 18:39 来吃点代码 阅读(324) 评论(0) 推荐(0) 编辑
Object.definePropert 解决Array劫持问题
摘要： 重写Array的原型方法 const orginalProto = Array.prototype; const arrayProto = Object.create(orginalProto); // 先克隆一份Array的原型出来 const methodsToPatch = [ 'push', 阅读全文
posted @ 2021-09-06 17:38 来吃点代码 阅读(51) 评论(0) 推荐(0) 编辑
2021年9月3日
性能优化
摘要： 渲染优化 1，资源加载位置 a，CSSOM与DOM是并行的，加载不会引起阻塞，但是Render Tree 依赖DOM Tree与CSSOM Tree,所以css必须优先加载，css放置与head中 b，js文件会引起DOM Tree的形成，造成页面渲染阻塞，因此，js要放置body底部 2，按需加载 阅读全文
posted @ 2021-09-03 16:13 来吃点代码 阅读(45) 评论(0) 推荐(0) 编辑
2021年9月2日
vue双向绑定原理
摘要： 原理 1，核心在Object.defineProperty() 这个方法实现对象属性的拦截 let a={} a.b='' Object.defineProperty(a,b,{ set(value){设置时触发 //触发更新视图 this.b=value }, get(value){//读取是触发 阅读全文
posted @ 2021-09-02 17:33 来吃点代码 阅读(55) 评论(0) 推荐(0) 编辑
Proxy
摘要： 是什么 proxy对象创建一个对象的代理，实现对象的的拦截和定义 怎么用 const p = new Proxy(【object】,【handler】) object：是指被代理的对象 handler：是一个容纳一批特定属性的占位符对象。它包含有 Proxy 的各个捕获器（trap）。 const 阅读全文
posted @ 2021-09-02 14:58 来吃点代码 阅读(232) 评论(0) 推荐(0) 编辑
Object.defineProperty()
摘要： 是什么 简而言之，就是用来设置对象的属性的，一般情况下普通设置方法，【object】.【attribute】=【value】就够了 但是当我们需要对属性添加上设置其他属性的时候这个就满足不了了，比如读取监听，读取内容修改，设置监听，设置内容编辑，是否只读等等 怎么用 Object.definePro 阅读全文
posted @ 2021-09-02 11:56 来吃点代码 阅读(40) 评论(0) 推荐(0) 编辑
ssr
摘要： 是什么 把vue的组件渲染为服务器端的Html字符串，发送给客户端，然后将静态标记混合为客户端上万川交互的应用程序 为什么 spa应用在使用时，自始至终都没有离开当前页面，响应的初次加载的量也要比多页面应用多，越是内容丰富的应用越是如此， 且单页面应用的内容都是由js生成的，所以不利于seo 而ss 阅读全文
posted @ 2021-09-02 10:10 来吃点代码 阅读(243) 评论(0) 推荐(0) 编辑
2021年8月31日
vue 小问题
摘要： v-if 和 v-show 区别 1，v-if是判断是否要渲染，若为false的时候，标签都不会出现，多用于变化较少或者直接是没有变化功能的显示区域 例如：用户信息的vip标志，头像这些 2，v-show是判断是否需要显示，这个时候标签内容是已经存在了，只是css上dispalck设置为none隐藏 阅读全文
posted @ 2021-08-31 16:46 来吃点代码 阅读(56) 评论(0) 推荐(0) 编辑