随笔分类 - vue
1
摘要：vue-property-decorator组件依赖于vue-class-components @Component 这个属性是写组件的核心，他一般作为装饰器植入我们所写的组件class内 而他也可以通过设置参数来讲一些额外的属性注入class内 <script lang="ts"> import
阅读全文
摘要：function Vue (options) { if (process.env.NODE_ENV !== 'production' &&!(this instanceof Vue)) { warn('Vue is a constructor and should be called with th
阅读全文
摘要：我们常用的指令中v-model 他实际上是语法糖 <template> <input v-model="value"/> </template> <script> export default { data() { return { value:'' }; } }; </script> 等于以下写法
阅读全文
摘要：是什么 webpack是JavaScript的模块打包工具，通过分析模块之间的依赖，将所有模块打包成一份或者多份代码包。 工作流程 1，初始化参数，初始化Compiler对象，从配置文件和shell 语句读取参数 2，开始编译，加载所有配置的插件 3，确定所有入口文件件 4，编译模块 5，根据模块之
阅读全文
摘要：核心方法 vue2.x， 通过Object.defineProperty()，遍历循环劫持所有数据 vue3，通过proxy（），可以直接监听对象 diff算法 vue2.x，在数据发生变化时，会生成一个虚拟dom，并和旧的虚拟dom进行对比，这个对比时全量对比，每个节点都会进行比对 vue3，在数
阅读全文
摘要：插槽 插槽的作用在于，为组件开放一个插口，将插入的内容替换到组件内容存留的空间 // <navigation-link>组件内内部 <a v-bind:href="url" class="nav-link"> <slot></slot> </a> //父级使用 <navigation-link> Y
阅读全文
摘要：是什么 1，虚拟dom：js直接操作dom的代价是相对昂贵的，每次操作dom都会让浏览器茶农头开始执行一遍流程， 每次更新执行一次，假若我某一次操作导致页面有10个节点更新，js直接操作dom就是10次浏览器计算， 而虚拟dom则会将10次更新对比旧代码保存在一个js对象（虚拟dom）中，然后一次性
阅读全文
摘要：Vue模版编译原理 1，将模板字符串转换成 elment ASTs (解析器) 2，对AST进行静态标注，即不需要修改的地方标注出来，后面的虚拟Dom对比时便会忽略这个，提升新能 3，将AST生成render函数 Vue事件绑定原理 原生时间是通过addEventListener来绑定的 vue是通
阅读全文
摘要：重写Array的原型方法 const orginalProto = Array.prototype; const arrayProto = Object.create(orginalProto); // 先克隆一份Array的原型出来 const methodsToPatch = [ 'push',
阅读全文
摘要：渲染优化 1，资源加载位置 a，CSSOM与DOM是并行的，加载不会引起阻塞，但是Render Tree 依赖DOM Tree与CSSOM Tree,所以css必须优先加载，css放置与head中 b，js文件会引起DOM Tree的形成，造成页面渲染阻塞，因此，js要放置body底部 2，按需加载
阅读全文
摘要：原理 1，核心在Object.defineProperty() 这个方法实现对象属性的拦截 let a={} a.b='' Object.defineProperty(a,b,{ set(value){设置时触发 //触发更新视图 this.b=value }, get(value){//读取是触发
阅读全文
摘要：是什么 proxy对象创建一个对象的代理，实现对象的的拦截和定义 怎么用 const p = new Proxy(【object】,【handler】) object：是指被代理的对象 handler：是一个容纳一批特定属性的占位符对象。它包含有 Proxy 的各个捕获器（trap）。 const
阅读全文
摘要：是什么 简而言之，就是用来设置对象的属性的，一般情况下普通设置方法，【object】.【attribute】=【value】就够了 但是当我们需要对属性添加上设置其他属性的时候这个就满足不了了，比如读取监听，读取内容修改，设置监听，设置内容编辑，是否只读等等 怎么用 Object.definePro
阅读全文
摘要：是什么 把vue的组件渲染为服务器端的Html字符串，发送给客户端，然后将静态标记混合为客户端上万川交互的应用程序 为什么 spa应用在使用时，自始至终都没有离开当前页面，响应的初次加载的量也要比多页面应用多，越是内容丰富的应用越是如此， 且单页面应用的内容都是由js生成的，所以不利于seo 而ss
阅读全文
摘要：v-if 和 v-show 区别 1，v-if是判断是否要渲染，若为false的时候，标签都不会出现，多用于变化较少或者直接是没有变化功能的显示区域 例如：用户信息的vip标志，头像这些 2，v-show是判断是否需要显示，这个时候标签内容是已经存在了，只是css上dispalck设置为none隐藏
阅读全文
摘要：是什么 vuex是专门为vue.js开发的状态管理模式 它解决的多个组件依赖同一个状态的情况，适用于在单页面中，跨组件状态管理，登录状态管理，购物车管理等等 相对而言结构比较复杂，对于简单页面没必要使用 eventBus又称事件总线，他使用的事订阅发布模式，一般于vue的prototype上注册一个
阅读全文
摘要：原理 通过改变url，在不重新请求页面的情况下更新视图 实现方式 hash模式，其实也就是锚点，这是html本身自带的功能，用于锚点定位， 他本身就是用来指导浏览器用的，对服务器端完全无用，不会导致页面重新请求 可以通过window.addEventListener('hashchange',fun
阅读全文
摘要：什么是生命周期 vue的生命周期指的是vue在运转过程中各个关键位点的挂钩 beforCreate:组件在创建之前 create： 组件已经创建属性绑定，但是还没有挂载，$el不可用，dom还没生成 beforeMount：在组件挂载之前执行 mounted：组件挂载完毕，dom已经生成，$el可用
阅读全文
摘要：vue组件件数据参数传递 父子之间传递 使用props由父级传递给子组件 使用$emit由子级触发父级的回调函数，并传递参数 子孙组件传递 1，简单粗暴使用父子传递套娃，这种粗暴的方式会导致中间的组件多出许多无用的属性以及回调函数 2，使用$attrs与$listeners 祖 -> 孙 在祖组件传
阅读全文
摘要：MVC（Model-View-Controller） 模型Model – 管理大部分的业务逻辑和所有的数据库逻辑。模型提供了连接和操作数据库的抽象层。 控制器Controller - 负责响应用户请求、准备数据，以及决定如何展示数据。 视图View – 负责渲染数据，通过HTML方式呈现给用户。 举
阅读全文
1
浙公网安备 33010602011771号