随笔分类 - Vue3/Vue2框架生态链
摘要：在 Vue SPA 应用中，如果想要修改HTML的头部标签，或许，你会在代码里，直接这么做 今天给大家介绍一种更优雅的方式，去管理头部标签： vue-meta。借用vue-meta github 上的介绍，基于Vue 2.0 的 vue-meta 插件，主要用于管理HMTL头部标签，同时也支持SSR
阅读全文
摘要：如果你在用 Vue 开发应用，那么就要当心内存泄漏的问题。这个问题在单页应用 (SPA) 中尤为重要，因为在 SPA 的设计中，用户使用它时是不需要刷新浏览器的，所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效。因此在vue开发过程中，你需要时刻警惕内存泄漏的问题，这些
阅读全文
摘要：vue的自定义指令是一个比较容易引起内存泄漏的地方，原因就在于指令通常给元素绑定了事件，但是如果忘记了解绑，就会产生内存泄漏的问题。 看下面代码： 起初，我忘记了些注释的unbind方法，导致出现了内存泄漏，给元素绑定的scroll方法，会一直存在内存里。导致出的情况，就是比如我进了页面滚动到第3页
阅读全文
摘要：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。 由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。 非插槽模板指
阅读全文
摘要：1、render函数、createElement函数 createElement 函数的作用就是生成一个 VNode节点（虚拟dom）， render 函数得到createElement() 创建的 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到
阅读全文
摘要：一、为什么需要使用Vue.set？ vue中不能检测到数组和对象的两种变化： 1、数组长度的变化 vm.arr.length = 4 2、数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vue.$set(target,key,value)：可以动态的给数组、对象添加和修改数据，并更新视图中
阅读全文
摘要：一、mixins 传入参数进行配置 最近做报表页面，基本都是列表页面，所以想用mixins。但是接口的url不同，于是考虑怎么才能传入参数去适配各个页面。后来发现mixin文件可以写个函数，接受传递过来的参数，然后return一个对象。大概如下： // mixin.js export default
阅读全文
摘要：vue 数据更新了，但是页面元素不更新，是我们开发过程中经常会遇到的场景，这里总结以下 7 种情况： 1、Vue 无法检测实例被创建时，不存在于 data 中的 property 原因：由于 Vue 会在初始化实例时，对 property 执行 getter/setter 转化，所以 propert
阅读全文
摘要：问题背景：有时候一些列表会有一些跳转的需求，比如跳到详情页、或者是其他相关的页面（比如跳到用户列表去查看用户的相关信息）等，此时再返回列表页，列表页会刷新重置。目前需求就是需要改成如下情况： 问题1、列表 - 详情页，返回，不刷新重置； 问题2、再点其他菜单，再返回，需要刷新重置。 解决思路： 解决
阅读全文
摘要：之前对网页做用户转化率调查这块，找到了谷歌GA事件，现在有时间对使用方法和遇到问题做个简单记录。官方文档其实也介绍的比较清楚，可以查看官方文档。 首先，在官网申请UA-id，然后在主页加入如下代码： <script async src="https://www.googletagmanager.co
阅读全文
摘要：公共组件： 调用 注意下面这个二进制文件接收和上传的问题
阅读全文
摘要：问题描述： 当使用新窗口弹出页面时，浏览器有时会默认拦截弹出，并不友好。 比如使用第三方支付宝api做支付的时候如果浏览器拦截支付弹窗，可能会导致用户不去付款。 解决方案： 方案一：浏览器拦截的机制就是认为是非用户触发的，所以会去拦截，那么我们的思路就是让他变成用户触发的，去避免浏览器进行拦截。 1
阅读全文
摘要：Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下nextTick。 一、示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。 点击后： 从图中可以得
阅读全文
摘要：ref 有三种用法： 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 注意： 1、ref 需要在
阅读全文
摘要：我们在项目中使用环境变量时，经常会使用到 .env 文件，那么关于 .env 文件中的内容是如何设置的？ VUE_APP_URL 是在 .env.* 文件中定义的，在项目启动时，vue-cli 会将以 VUE_APP_ 开头的变量读取至环境变量，这是 vue-cli 强制要求的“你想用我的工具，就得
阅读全文
摘要：下载安装echarts包：npm install echarts -D 一、全局引入 main.js中配置 缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验 二、按需引入 如果是在许多页面中都有用到，就写在main.js中 在
阅读全文
摘要：嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。 比如在vue中，我们如果不使用嵌套路由，那么只有一个<router-view>，但是如果使用，那么在一个组件中就还有<router-view>，这也就构成了嵌套。 1、为什么要使用嵌套路由？ 就比如在一个页面中，
阅读全文
摘要：<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 <keep-alive> 与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚
阅读全文
摘要：在vue.js组件教程的一开始提及到了is特性 意思就是有些元素，比如 ul 里面只能直接包含 li元素，像这样： <ul> <li></li> </ul> //而不能： <ul> <your-component> </ul> 这样就不能复用your-component这个组件了，如果要达到我们的目
阅读全文
摘要：1、路由全局守卫 在做项目的时候，遇到需要做路由跳转，但当用户输入错误url地址，或是其它非法url路由地址，我们或许会想到跳转至404页面。不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向，redirect来解决这个问题。但实际上通过redirec
阅读全文
