随笔分类 - Vue3/Vue2框架生态链
摘要：一、页面权限控制 页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。 一种方法是通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里，这是其中一种办法。 另一种办法就是所有的页面
阅读全文
摘要：最近总结了一下自己在项目中使用到的性能优化手段，这里主要从两个部分来详解vue项目的性能优化：代码层优化、webpack打包优化 一、代码优化 1、v-if 和 v-show v-if 是懒加载，当状态为 true 时才会加载，并且为 false 时不会占用布局空间； v-show 是无论状态是 t
阅读全文
摘要：一、render简介 Render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的
阅读全文
摘要：一、使用template还是JSX？ 1、template特点 模板语法（HTML的扩展） 数据绑定使用Mustache语法（双大括号）：<span>{{title}}<span> 2、JSX特点 JavaScript的语法扩展 数据绑定使用单引号：<span>{title}<span> Vue官方
阅读全文
摘要：一、概述 我们应该都知道 vue会通过 object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 vue
阅读全文
摘要：一、什么是前端路由？ 路由是根据不同的 url 地址展示不同的内容或页面。路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。 而在 Web 前端单页应用中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面
阅读全文
摘要：一、说明 我们习惯于用Vuex去解决状态的共享问题，但是在小项目中使用就会有增大代码体积和将代码复杂化的烦恼，所以在Vue（2.6.0）的版本中新增了一个跨组件通信方案：Vue.observable(object)。 其作用是让一个对象可响应，Vue 内部会用它来处理 data 函数返回的对象。返回
阅读全文
摘要：由于 vue2.0 移除了1.0中的$dispatch 和$broadcast 这两个组件之间通信传递数据的方法，官方给出的最简单的升级建议是使用集中的事件处理器，而且也明确说明了 一个空的vue实例就可以做到，因为Vue 实例实现了一个事件分发接口。 vue2.0中可以使用 $emit, $on,
阅读全文
摘要：一般刷新页面可以用 location.reload(true)，history.go(0) 等方法，但是这对vue项目很不友好，会使页面重新加载出现暂时性的空白，而且耗费性能，所以vue项目最好不用这些方法。vue有this.$forceUpdate()可以强制更新，下面介绍其他更好的方法。 一、带
阅读全文
摘要：我们可以总结下组件通信的几大方法： 一、props属性传递数据 二、$emit、@on，事件触发与事件监听 三、状态管理 vuex，或者 Vue.observale()进行状态管理 四、ref引用获取组件实例 五、$parent、$children，获取当前组件的父组件、子组件 六、通过 provi
阅读全文
摘要：一、前言 接触hook是从webhook开始接触的，webhook是git的一个扩展服务，可以在仓库接收到push/commit事件并发送http request至一个开发者可以自定义的URL。通过这个，我们可以在服务器实现若干自动化流程(诸如更新最新代码，打包编译，部署)，而webhook的技术原
阅读全文
摘要：最近在做一个类似语雀一样的项目，自定义了一个目录，无限层级，并有拖动等效果（与语雀里知识库目录一样），自己手写，记录下代码。 组件核心思想就是组件递归，很多插件的tree结构，其核心原理也就是用的组件递归。 一、我们来看看实例代码，不使用组件递归的话怎么写 1、组件 <template> <div
阅读全文
摘要：插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种： 添加全局方法或者 property。如：vue-custom-element 添加全局资源：指令/过滤器/过渡等。如 vue-touch 通过全局混入来添加一些组件选项。如 vue-router 添加 Vue 实
阅读全文
摘要：一、基础 常用场景：有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？ 两种解决方案都不够完美：如果拆分成两个组件，你就不得不冒着一旦功
阅读全文
摘要：一、高阶组件介绍 vue 高阶组件的认识，在React中组件是以复用代码实现的，而Vue中是以mixins 实现，并且官方文档中也缺少一些高阶组件的概念,因为在vue中实现高阶组很困难，并不像React简单,其实vue中mixins也同样可以代替,在读了一部分源码之后,对vue有了更深的认识。 所谓
阅读全文
摘要：一、认识Vue错误处理 1、errorHandler 首先，可以看看Vue文档对其的介绍。这里不赘述太多，直接使用，一起看看打印结果。代码如下： // main.js Vue.config.errorHandler = function (err, vm, info) { console.log('
阅读全文
摘要：Proxy可以理解成，在目标对象之前架设一层 "拦截"，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。 如果对vue2.xx了解或看过源码的人都知道，vue2.xx中使用 Object.defineProp
阅读全文
摘要：项目中需要一个日历，日历上挂载一些活动啥的，还有一些特殊的查询的处理，各大ui库也满足不了自己项目的需求，所以自己写一个，踩的坑也忘了，毕竟是很早之前写的，而且对于时间的处理和排布，还是有点复杂的。所以记录先吧，以防以后可以要用。 <template> <div class="calendar_bo
阅读全文
摘要：一、如何写一个vue插件 1、首先建立一个普通的vue项目进行编写 vue create vue-button-gwf 2、然后创建plugins文件夹，和plugins下的lib文件夹，在lib文件夹下写你的插件代码 3、插件代码编写 如上面的 button.vue 文件示例，就像写普通vue组件
阅读全文
摘要：本文要谈到的 Hooks，不同于 Lifecycle Hooks（生命周期钩子），它是在 v16.7.0-alpha 中引入 React 的；尽管 Hooks 是由 React 提出，但是它的本质是一种重要的代码组合机制，对于整个 JavaScript 的框架系统都大有好处；今天花点时间具体来谈谈：
阅读全文
