随笔分类 -  VUE

Vue源码之 virtual-dom 实现简析
摘要：发现两篇写得特别好的博文，仔细通读，发现豁然开朗。 浅析Vue 中的patch和diff Vue 2.0 的 virtual-dom 实现简析 阅读全文
posted @ 2018-05-11 11:09 leaf+ 阅读(189) 评论(0) 推荐(0)
vue源码之抽象dom树
摘要：一、抽象DOM树 使用过vue的朋友应该都知道，vue使用的是虚拟DOM，将DOM抽象成一个以JavaScript对象为节点的虚拟DOM树，以VNode节点模拟真实DOM，可以对这颗抽象树进行创建节点、删除节点以及修改节点等操作，在这过程中都不需要操作真实DOM，只需要操作JavaScript对象后 阅读全文
posted @ 2018-05-10 19:06 leaf+ 阅读(378) 评论(0) 推荐(0)
vue的项目优化---回顾
摘要：陆陆续续也用vue开发或重构了不少项目，在这期间遇到不少的坑，也尝试过优化。在此记录一下，想到一点算一点吧： 一、尽可能的减少watcher的数量 当监听数据是一个对象的时候，最好具体到监听对象的属性； 二、渲染 1、可以用懒加载、分页、滚动加载或者tab方式去展示其他内容，减少每次渲染的数量； 2 阅读全文
posted @ 2018-05-08 22:35 leaf+ 阅读(373) 评论(0) 推荐(0)
Hybrid混合式开发---回顾
摘要：一、前言 去年12月份开启了一个新项目--在线抓娃娃，就是让用户可以通过app去控制我们机房中的娃娃机来抓取娃娃。本项目开发半个月就紧急上线第一版本，中间经过2次大版本迭代，一个月不到就做到用户量超过10w+，后面也算做到了市场中的前三。这个项目也算是某个点间的红利，当我们决定做这个之前，市面上只有 阅读全文
posted @ 2018-05-02 15:27 leaf+ 阅读(294) 评论(0) 推荐(0)
在vue生命周期中及时销毁全局作用的代码
摘要：一、纯客户端中 对于全局的代码，比如定时器等，在 beforeDestroy或 destroyed 生命周期时将其销毁。如果在跳转路由时候，组件销毁了，全局的定时器却没有销毁，这会使得页面产生卡顿。 二、服务端渲染过程中 所有的生命周期钩子函数中，只有 beforeCreate 和 created  阅读全文
posted @ 2018-02-08 16:31 leaf+ 阅读(2312) 评论(0) 推荐(0)
修改原生单选框样式（vue单选组件）
摘要：一、效果如图 二、实现 修改单选样式 阅读全文
posted @ 2018-02-03 11:23 leaf+ 阅读(4129) 评论(0) 推荐(0)
地址四级联动的vue组件
摘要：一、效果图如下： 二、思路 主要在vue中结合 mint-ui组件的Picker和Popup方法，负责对json地址进行展示； 三、代码地址 四、说明 address4.json最好是在点击父组件的地址按钮时候再加载进来，使用require()加载进来 window.s = require('../ 阅读全文
posted @ 2018-01-06 18:20 leaf+ 阅读(4160) 评论(0) 推荐(0)
webpack require.ensure 按需加载
摘要：使用 vue-cli构建的项目,在 默认情况下 ,会将所有的js代码打包为一个整体比如index.js。当使用存在多个路由代码的时候，index.js可能会超大，影响加载速度。 这个每个路由页面除了index.js 还会有一个当前路由页面的js这样拆分了index.js的体积。 阅读全文
posted @ 2017-12-25 15:49 leaf+ 阅读(732) 评论(0) 推荐(0)
Vue this.$nextTick原理
摘要：虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。比如一个新闻滚动的列表项。如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。 一、新闻滚动列表 1、在created函数中获取后台数据； 2、模板引擎中用v-for生成 阅读全文
posted @ 2017-07-30 09:51 leaf+ 阅读(40396) 评论(0) 推荐(2)
从Object.definedProperty中看vue的双向数据的绑定
摘要：前言 Object.defineProperty是ES5中的方法，它可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。vue.js正式利用这种方法实现数据的双向绑定,以达到响应式的目的。 1、语法 Object.defineProperty(object, prope 阅读全文
posted @ 2017-05-22 20:32 leaf+ 阅读(6553) 评论(1) 推荐(0)
vue之生命周期的一点总结
摘要：vue的生命周期的过程提供了我们执行自定义逻辑的机会，好好理解它的生命周期，对我们很有帮助。 一、vue实例的生命周期 二、生命周期描述：（参考截图） 三、例子 结果如图： 四、 单个组件声明周期 初始化组件时，仅执行了beforeCreate/Created/beforeMount/mounted 阅读全文
posted @ 2017-05-19 09:50 leaf+ 阅读(1430) 评论(0) 推荐(0)
Vue-起步篇：Vue与React、 Angular的区别
摘要：毋庸置疑，Vue、React、 Angular这三个是现在比较火的前端框架。这几个框架都各有所长，选择学习哪种就得看个人喜好或者实际项目了。相比之下， Vue 是轻量级且容易学习掌握的。 1、Vue和React 相似之处 都使用 虚拟DOM 提供了响应式（Reactive）和组件化（Composab 阅读全文
posted @ 2017-02-04 15:43 leaf+ 阅读(672) 评论(0) 推荐(0)