vue
关注
分享
扫一扫
文章平均质量分 66
huang100qi
这个作者很懒，什么都没留下…
展开
-
前端异常捕获和定位
前言于前端而言，不管是开发还是生产阶段，异常的捕获和定位都是至关重要的。开发阶段，通过详细的报错信息，我们可以快速定位并解决问题。在生产，通过异常监控，根据异常埋点信息，我们可以第一时间知道异常信息，不至于造成严重后果。window.onerror全局监听异常来捕获借鉴下 MDN 的说明，当 JavaScript 运行时错误（包括语法错误）发生时候， wi...转载 2020-01-16 17:13:28 · 258 阅读 · 0 评论 -
一个Vue页面的内存泄露分析
什么是内存泄露？内存泄露是指new了一块内存，但无法被释放或者被垃圾回收。new了一个对象之后，它申请占用了一块堆内存，当把这个对象指针置为null时或者离开作用域导致被销毁，那么这块内存没有人引用它了在JS里面就会被自动垃圾回收。但是如果这个对象指针没有被置为null，且代码里面没办法再获取到这个对象指针了，就会导致无法释放掉它指向的内存，也就是说发生了内存泄露。为什么代码里面会拿不到这个对象指...转载 2019-11-03 12:00:03 · 471 阅读 · 0 评论 -
Vuex的实战使用
vuex的实战使用写在前面我是一个看技术的文档不喜欢官方的人，觉得官方写的任何东西都是比较正式的，让人有点不想看的赶脚，我这里也不贴官方的那个图了，这里也不解释了（其实是我也不想研究）所以我一般都是百度一些别人的经验之谈，看别人的经验之谈可以让你少踩一些坑，而且是可以直接看到效果的，所以这里也是，我们不按照官方的来，那么有利有弊，利就是好理解，弊就是可能写的不够专业，会让一些人误会，总之我权衡...转载 2019-11-02 19:52:21 · 158 阅读 · 0 评论 -
Vue.js 插件开发详解
认识插件想要开发插件，先要认识一个插件是什么样子的。Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如...转载 2018-09-05 13:13:23 · 163 阅读 · 0 评论 -
深入Vue2.x的虚拟DOM diff原理
作者简介：汪玉林，高级工程师，增值产品部前端Leader，目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目，有丰富的Web前端架构经验。 一、前言Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnod...转载 2018-09-11 22:08:33 · 179 阅读 · 0 评论 -
VueSSR高阶指南
嗨 各位小伙伴好，好久没有写文章了，这次分享一下我们从使用node以来，前端架构上的一些优化 如果看过我上一篇文章B站的前端之路的小伙伴可能知道 我们从去年开始打烊 使用node 到现在已经经历了一年的迭代，承载的访问量也从百万级别 扩大到了现在的亿级别，这次补充一些干货吧~vue如何实现热更新我们都知道，对于node来说，前端vue代码的迭代节奏是很快的，可能一周要迭代几次，但是node...转载 2018-09-09 03:26:45 · 4117 阅读 · 0 评论 -
Vue组件中利用.sync修饰符实现对prop进行双向数据绑定
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。所以官方推荐以update:my-prop-name 的模式触发事件取而代之为了好理解，我写了一个很简单的小例子：（单击输入框，显示或隐藏下面的box）下面是完整的代码：<!DOCTYPE html>...转载 2018-11-15 13:26:18 · 373 阅读 · 0 评论 -
vue 生命周期 详解
先来看看vue官网对vue生命周期的介绍Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后会初始...转载 2019-03-05 23:50:49 · 173 阅读 · 0 评论 -
为什么要有 hash 和 history
对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了以下两种支持：hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/h...原创 2018-05-08 11:54:20 · 3121 阅读 · 0 评论 -
vue-cli + webpack 多页面实例应用
关于vue.jsvue.js是一套构建用户界面的 轻型的渐进式前端框架。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。使用vue可以给你的开发带来极致的编程体验。关于vue-cliVue-cli是vue官方提供的一个命令行工具（vue-cli），可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启转载 2018-01-28 01:08:31 · 2454 阅读 · 0 评论 -
VUE2.0组件之间的传值
Vue1.0组件间传递 使用$on()监听事件； 使用$emit()在它上面触发事件； 使用$dispatch()派发事件，事件沿着父链冒泡； 使用$broadcast()广播事件，事件向下传导给所有的后代Vue2.0后$dispatch()，$broadcast()被弃用，见https://cn.vuejs.org/v2/guide/migration.htm原创 2017-09-13 01:11:40 · 727 阅读 · 0 评论 -
速开发一个vue插件并发布npm
转自：http://www.imooc.com/article/19691写在前面本次演示的是开发一个 vue手机虚拟支付键盘插件 主要讲解的是如何快速开发一个vue插件并发布到npm上源码地址所有代码都可以在我的GitHub vue-pay-keyboard 上查看,欢迎start..demo演示地址请用手机或者电脑仿真查看 vuepayboard关于转载 2017-12-20 18:48:40 · 797 阅读 · 0 评论 -
页面刷新的时候vuex里的store对象里的state变量丢失简单处理思路
1.页面刷新的时候，按照vue的生命周期，会调用mounted函数。2.如果在mounted里面再次给vuex的变量赋值，也就是再次commit，那就不会出现刷新的时候数据丢失。如上述：具体做法是先用localstorage存起来，在mounted时调用commit方法并把mutation名及参数（值）实现把localstorage里面的值赋值给vuex变量即可原创 2017-12-13 19:22:14 · 5317 阅读 · 0 评论 -
页面刷新vuex数据消失问题解决方案
转自：http://www.cnblogs.com/cloud-/p/7103054.htmlVBox持续进行中，哀家苦啊，有没有谁给个star。vuex是vue用于数据存储的，和redux充当同样的角色。最近在VBox开发的时候遇到的问题，页面刷新或者关闭浏览器再次打开的时候数据归零。这是头疼的问题。网上搜，大家的方案都是把数据转移到 localStorage或者转载 2017-12-13 16:48:34 · 4567 阅读 · 0 评论 -
vuex module使用
const moduleA = { state: {....}, mutations: {....}, actions: {...}, getters: {...}}const moduleB = { state: {....}, mutations: {....}, actions: {...}, getters: {...}}原创 2017-11-27 21:26:40 · 468 阅读 · 0 评论 -
vuex核心API使用用例
html>html lang="en">head> meta charset="UTF-8"> title>vuex-demotitle> script src="libary/vue.js">script> script src="libary/vuex.js">script>head>body>div id="app"> h1>{{ msg }原创 2017-11-27 23:47:40 · 418 阅读 · 0 评论 -
VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
我们在开发项目的时候，往往会在同一个局域网进行开发，前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是，当项目推到线上的时候，我们会从真实服务器上获取接口，因此，我们可能在测试接口和真实接口之间频繁切换，让人十分恶心。因此，我们有必要想办法解决这个问题。本文是 Vue2+VueRouter2+webpack 构建项目实战 的后续文章。理解本文内容，需要转载 2018-01-11 14:25:56 · 1097 阅读 · 0 评论 -
vue-cli 添加less 以及sass
vue-cli中已经内置配置好了sass 以及lass的配置。如果需要的话直接下载两个模块就可以了npm install node-sass --save-devnpm install sass-loader --save-dev如果是淘宝镜像直接运行cnpm是一样的效果然后在组件或者视图中给样式加上语言就可以了style lang="sass" scoped>转载 2018-01-05 12:59:00 · 411 阅读 · 0 评论 -
优化 Vue 项目编译文件大小
与其说是优化 Vue，不如说主要是在 webpack 打包的配置中做些文章，使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程，其中的内容也许并不适合于每个项目，但整体思路是差不多的。定位问题要想进行优化，首先我们得清楚问题所在。即：是哪些代码/依赖包导致最后的编译文件过大？这里，我们需要使用 webpack-bundle-analyzer 工具。原创 2017-09-13 00:12:26 · 4162 阅读 · 0 评论