11 2018 档案
摘要：1、10种通信方式 10种：https://juejin.im/post/5bd18c72e51d455e3f6e4334 2、除此之外，还有children和ref。 需要注意 $children （返回的是数组类型）并不保证顺序，也不是响应式的。 所以若父组件只有一个子组件还好；若含有多个子组件
阅读全文
摘要：滚动条设置 超出部分隐藏 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 ...
阅读全文
摘要：1、Watcher构造函数源码部分代码 2、deep watcher deep watcher指的是深度 watcher 可以深度监测对象属性的改变 3、user watcher 就是一般的vue的watch属性 https://cn.vuejs.org/v2/api/#watch 4、comput
阅读全文
摘要：示例： 通过设置created和mounted中定时时间不同，查看控制台输出顺序。 完全乱套！ 只能保证最先输出3 其次输出4。 await后的 5 和 6 也不是在await后输出。 结论是：所有的钩子函数都只是在指定时间执行而已，框架并不关心它们执行的结果，所以你要做的是将async和await
阅读全文
摘要：https://segmentfault.com/a/1190000008291645 一个VNode的实例对象包含了以下属性 tag: 当前节点的标签名 data: 当前节点的数据对象 tag: 当前节点的标签名 data: 当前节点的数据对象 VNode可以理解为vue框架的虚拟dom的基类，通
阅读全文
摘要：provide和inject使用场景也是组件传值，尤其是祖父组件--孙组件等有跨度的组件间传值，单向传值（由provide的组件传递给inject的组件）。 provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。 inject 通常是一个字符串数组。 示例： （1）祖
阅读全文
摘要：inheritAttrs、listeners使用场景： 组件传值，尤其是祖孙组件有跨度的传值。 （1）inheritAttrs 属性说明：https://cn.vuejs.org/v2/api/#inheritAttrs 说明比较晦涩。 组件传值一般是通过props传值的。inher
阅读全文
摘要：1、添加sourceMap sourceMap: true 2、npm run dev 会生成vue.js.map 3、断点调试 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue源码测试</title> </head>
阅读全文
摘要：1、问题 思考一个问题，以下代码： 当我们在控制台输入：app.list[0] = 100时，vue会监测到变化吗？ app.push(100)呢？ 引申出的问题就是： vue对数组新增的元素，包括push、unshift和splice（插入）的元素是怎么做到响应式的呢？ 2、Vue对新增的数组元素
阅读全文
摘要：1、vue响应式原理流程图概览 2、具体流程 （1）vue示例初始化(源码位于instance/index.js） 响应式相关的是“stateMixin”。 （2）、state.js(源码位于instance/state.js) 与响应式有关的是： 在initData中实现了2个功能： （2）.1
阅读全文
摘要：export const inBrowser = typeof window !== 'undefined' export const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform export const weexPlatform = inWeex && WXEnvironment.platf...
阅读全文
摘要：1、DOM 节点树 高效的更新所有这些节点会是比较困难的，因为原生的DOM节点属性很多，渲染性能差。 2、虚拟 DOM “虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。 Vue 的模板实际是编译成了 render 函数。 3、渲染流程 说明： （1）模板templat
阅读全文
摘要：1、diff比较算法 图示： diff比较只会在同层级进行, 不会跨层级比较。 所以diff是：广度优先算法。 时间复杂度：O(n) 代码示例： 我们可能期望将<span>直接移动到<p>的后边，这是最优的操作。 但是实际的diff操作是： （1）移除<p>里的<span> （2）创建一个新的<sp
阅读全文
摘要：1、流程 2、参考文章地址 https://segmentfault.com/a/1190000012336392 3、Vue框架的parseComponent https://github.com/vuejs/vue/blob/dev/src/sfc/parser.js
阅读全文
摘要：1、源代码 2、cached函数，输入参数为函数，返回值为函数。同时使用了闭包。
阅读全文
摘要：对象一般使用JSON.stringify来实现字符串化。
阅读全文
摘要：vue生命周期钩子个数是：11个。 export const LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeDestroy', 'd
阅读全文
摘要：1、示例代码 2、解决this绑定问题 （1）最常用的是方法一 （2）箭头函数：不够理想，函数是匿名的；同时混淆了this绑定规则和词法作用域规则。 与 效果一致。
阅读全文
摘要：1、nextTick调用方法 首先看nextTick的调用方法： https://cn.vuejs.org/v2/api/#Vue-nextTick 即：既可以支持回调函数，也可以支持then方法（即Promise）。 2、vue nextTick源码分析 https://github.com/vu
阅读全文
摘要：1、安装 2、fis-conf.js配置文件（可根据需要配置） 常用插件地址：http://fis.baidu.com/fis3/docs/common-plugin.html 3、示例文件 注意：共用文件引入的方式： 5、构建输出
阅读全文
摘要：axios的配置项地址参考： https://www.npmjs.com/package/axios 1、url（必写） 请求地址 2、method 请求方法，默认是get 3、baseURL（常用） baseURL会添加到url前（url是绝对地址除外）。 4、transformRequest `
阅读全文
摘要：1、原理 js按照固定的时间间隔找到不在继续使用的变量，释放其占用的内存。 2.实现方式 （1）标记清除 垃圾收集器给存储在内存上的所有变量都加上标记； 之后，去掉环境中的变量以及被环境引用变量的标记； 之后，被加上标记的变量就是准备删除的变量（原因是环境中的变量无法访问到这些变量了）。 目前，IE
阅读全文
摘要：本文参考自：https://www.cnblogs.com/YMaster/p/6920441.html async/await 规则： async 表示这是一个 async 函数，而 await 只能在这个函数里面使用。 await 表示在这里等待 await 后面的操作执行完毕，再执行下一句代码
阅读全文
摘要：1、插件 可以安装lifecycle-webpack-plugin 插件来查看生命周期信息。 2、webpack流程（生命周期图） 地址：https://img.alicdn.com/tps/TB1GVGFNXXXXXaTapXXXXXXXXXX-4436-4244.jpg 具体说明： http:/
阅读全文
摘要：区别 object和Map存储的都是键值对组合。但是： object的键的类型是 字符串； map的键的类型是 可以是任意类型； 另外注意，object获取键值使用Object.keys（返回数组）； Map获取键值使用 map变量.keys() (返回迭代器)。 示例代码：
阅读全文
摘要：1、概念 在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。 2、注意 “暂时性死区”也意味着typeof不再是一个百分之百安全的操作。
阅读全文
摘要：1、动画实现代码 （1）使用定位实现： （2）使用transform实现 2、性能分析 （1）打开chrome 控制台的Performance （2）打开rendering （查看帧率） 对以上2个代码段执行录制： 性能结果： （1）使用定位布局来实现动画的结果为： （2）使用transform实现
阅读全文
摘要：1、项目结构 2、src下的入口文件 https://github.com/ElemeFE/element/blob/dev/src/index.js 入口文件实现的功能为： （1）国际化配置 （2）组件全局注册 （3）在prototype上挂载共用方法 3、自定义指令directives 自定义指
阅读全文
摘要：1、兼容性 https://caniuse.com/#search=sticky chrome、ios和firefox兼容性良好。 2、使用场景 sticky：粘性。粘性布局。 在屏幕范围内时，元素不受定位影响（即top、left等设置无效）； 当元素的位置将要移出偏移范围时，定位又会变成fixed
阅读全文
摘要：1、代码 控制台输出： 2、说明 promise将执行结果（不管是resolve还是reject），传到then和catch中。
阅读全文
摘要：1、set ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 使用add方法向 Set 结构加入成员。 2、size 注意！没有length！ 确定set结构中有几个元素。 3、add/delete/has/clear
阅读全文
摘要：1、深冻结 2、浅冻结
阅读全文
摘要：使用 ref 为子组件指定一个引用 ID。例如： 引用子组件： refs。 此方案可以用来父子通信。
阅读全文
摘要：1、循环中断差别 具体见示例代码： 数组的迭代方法：every、filter、forEach、map、some均不能使用break或者continue进行中断循环。 以上几个函数的参数都是：一个回调函数 和 一个this的指向 2、数组变化时差别 （1）数组添加操作 （2）数组更新、删除操作
阅读全文
摘要：二、stringify也可以实现字符串化，并且健壮性也良好。
阅读全文
摘要：1、使用插件async-validator async-validator 地址：https://github.com/yiminghe/async-validator 2、示例（vue+element-ui） 注意校验书写格式：
阅读全文
摘要：1、前端渲染table 序号 2、使用element ui http://element-cn.eleme.io/#/zh-CN/component/table#zi-ding-yi-suo-yin 即‘通过给 type=index 的列传入 index 属性，可以自定义索引。’来实现。 不需要后端
阅读全文
