huangjianfeng21的博客

运行时性能主要关注 Vue 应用初始化之后对 CPU、内存、本地存储等资源的占用，以及对用户交互的及时响应。下面是一些有用的优化手段v-show，v-if 用哪个在我来看要分两个维度去思考问题，第一个维度是权限问题，只要涉及到权限相关的展示无疑要用v-if，第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用v-show，不频繁切换的使用v-if，这里要说的优化点在...

常见场景有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？两种解决方案都不够完美：如果拆分成两个组件，你就不得不冒着一旦功能变动就要在两个文件中更新代码的风险，这违背了 DRY 原则。反之，太多的props传值会很快变得混乱不堪...

前言Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一个 html 文件，然后根据访问的 url 来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也给我们带来了许多问题，例如 SEO 不友好、首屏可见时间过长等。服务端渲染（SSR）和预渲染（Prerender）技术正是为解决这些问题而生的。...

前言本篇文章分析 vue 作为一个 MVVM 框架的基本实现原理 ：数据代理 ；模板解析 ；数据绑定不直接看 vue.js 的源码 ，剖析 github 上某基友仿 vue 实现的 mvvm 库地址:https://github.com/DMQ/mvvm必备的知识点在开始分析vue源码之前，必须要知道的以下知识点[].slice.call(lis): 将伪数组转...

安装方法1：<script>标签引入我们可以在Vue.js的官网上直接下载vue.min.js并用<script>标签引入。Vue会被注册为一个全局变量。vue.min.js的版本开发版本：包含完整的警告和调试模式生产版本：删除了警告，24.72kb min+gzip重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告。（开发环...

MVVM框架概述什么是vue是一套构建用户界面的渐进式（用到哪一块就用哪一块，不需要全部用上）前端框架，Vue的核心库只关注视图层vue的兼容性Vue.js不支持IE8及其以下版本，因为Vue.js使用了IE8不能模拟的ECMAScript 5特性。Vue.js支持所有兼容ECMAScript 5的浏览器。...

eslint配置方式注释配置：使用js注释来直接嵌入ESLint配置信息到一个文件里配置文件：使用一个js文件，JSON或者YAML文件来给整个目录和它的子目录指定配置信息。这些配置可以写在一个文件名为.eslintrc.*的文件或者在package.json文件里的eslintConfig项里，这两种方式ESLint都会自动寻找然后读取，或者你也可以在命令行里指定一个配置文件...

项目整体目录结构预览src目录src整体结构开发过程中基本上操作都在该目录下进行操作的，项目所有源码都是在这个目录下main.js文件，项目核心文件App.vue文件，项目入口文件router/index.jsbuild目录build目录的文件和作用是打包编译输出的相应文件配置，用于打包和部署build.js文件...

服务端渲染介绍服务端渲染的模式就是：就是将本来要放在浏览器执行创建的组件，放到服务端先创建好，然后生成对应的html，在请求一个网址的时候，服务端收到请求之后把html的内容先生成好然后再返回给浏览器。这样子搜索引擎就可以通过你返回的a标签抓取到网站的其他页面了，最后将这些静态标记"激活"为客户端上完全可交互的应用程序在看下面内容之前建议大家先去看下《Vue SSR指南》https://...

安装脚手架cli3.0全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli查看版本/是否安装成功 vue -V如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具npm install -g @vue/cli-initvue init webpack my-project创建...

前言在vue应用的开发中，错误监控和处理大致分为三部分：代码层面的错误，请求上的错误，页面级别；下面依次根据这三部分错误给出处理方案代码层面的错误如果你开启了eslint在编写代码的时候就会提示错误。如：配合eslint基本上可以在开发过程中就将错误提示处理，在开发中就已经解决了，但是因为有当然还有很多不能被eslint检查出来的错误，vue 也提供了全局错误...

前言有时候，看到用户的反馈，我们往往会一脸茫然，因为反馈的信息太少了。比如有用户反馈登录不了。为了解这个问题，一般的流程是这样的：首先试试自己能不能登录网站，发现没问题；然后查看后台日志，发现最近没有登录接口相关的报错；最后根据用户反馈的时间，去后台查日志记录。结果日志记录没有错误信息。那这个问题没法解决了！除非找出用户的联系信息，和他去聊聊这个bug。这样的情况很多，有时候及...

Nuxt.js的介绍Nuxt.js概述nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）Vue.js是开发SPA（单页应用）的，Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的UI渲染我们的目标...

关于骨架屏介绍骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。这里主要通过代码为大家展示如何一步步做出这样一个骨架屏：prerender 渲染骨架屏...

利用服务端渲染（SSR）和预渲染（Prerender）来优化加载性能在一个单页应用中，往往只有一个 html 文件，然后根据访问的 url 来匹配对应的路由脚本，动态地渲染页面内容。单页应用比较大的问题是首屏可见时间过长。单页面应用显示一个页面会发送多次请求，第一次拿到 html 资源，然后通过请求再去拿数据，再将数据渲染到页面上。而且由于现在微服务架构的存在，还有可能发出多次数据请求才能...

使用页面滚动条监听的场景通常我们在开发过程中会遇到一些需求，比如：当页面向上滑动或者向下滑动时，当页面滚动条滑动到某个位置的时候，当页面滚动或者停止滚动的时候，当页面滚动到顶部或者底部的时候，需要做一些页面上的处理，那么这个时候我们就需要监控页面的滚动条滚动条频繁触发的问题监听页面是否在滚动监听页面是否滚动到具体指定的某个位置（指定数值，顶部，底部）监听滚动条的方向（向上...