随笔分类 - Vue
摘要：Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件，现代化浏览器提供了很多新接口，在不考虑IE兼容性的情况下，这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情，当然为了考虑IE我们也可以在封装组件的时候为其兜底，本文的首屏性能优化组件主要是使用IntersectionO
阅读全文
摘要：初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境，vue-cli确实是个好东西，让我们不需要关心webpack等一些繁杂的配置，然后直接开始写业务代码，但这会造成我们过度依赖vue-cli，忽视了webpack的重要性，当遇到一些特殊场景时候，例如Vu
阅读全文
摘要：v-html可能导致的问题 Vue中的v-html指令用以更新元素的innerHTML，其内容按普通HTML插入，不会作为Vue模板进行编译，如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代。 描述 易导致XSS攻击 v-html指令最终调用的是innerHTML方法将指令的va
阅读全文
摘要：Vue中的三种Watcher Vue可以说存在三种watcher，第一种是在定义data函数时定义数据的render watcher；第二种是computed watcher，是computed函数在自身内部维护的一个watcher，配合其内部的属性dirty开关来决定computed的值是需要重新
阅读全文
摘要：Vue为何采用异步渲染 Vue在更新DOM时是异步执行的，只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一个watcher被多次触发，只会被推入到队列中一次，这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的，然后，在下一个的事件循环ti
阅读全文
摘要：Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小、速度更快、加强TypeScript支持、加强API设计一致性、提高自身可维护性、开放更多底层功能。 描述 从Vue2到Vue3在一些比较重要的方面的详细对比。 生命周期的变化 Vue2 -> Vue3 beforeCreate -> se
阅读全文
摘要：Vue中组件间通信的方式 Vue中组件间通信包括父子组件、兄弟组件、跨级组件、非嵌套组件之间通信。 props $emit props $emit适用于父子组件的通信，这种组件通信的方式是我们运用的非常多的一种，props以单向数据流的形式可以很好的完成父子组件的通信，所谓单向数据流，就是数据只能通
阅读全文
摘要：Vuex中的核心方法 Vuex是一个专为Vue.js应用程序开发的状态管理模式，其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的核心就是store仓库，store基本上就是一个容器，它包含着你的应用中大部分的状态state。 描述 在大
阅读全文
摘要：Vuex中的核心方法 Vuex是一个专为Vue.js应用程序开发的状态管理模式，其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的核心就是store仓库，store基本上就是一个容器，它包含着你的应用中大部分的状态state。 描述 在大
阅读全文
摘要：Vue常用性能优化 Vue常用的一些优化方式，主要是在构建项目过程需要注意的方面。 编码优化 避免响应所有数据 不要将所有的数据都放到data中，data中的数据都会增加getter和setter，并且会收集watcher，这样还占内存，不需要响应式的数据我们可以直接定义在实例上。 <templat
阅读全文
摘要：服务端渲染SSR的理解 SSR服务端渲染Server Side Render就是当进行请求时，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的HTML即可。 客户端渲染CSR 通常在构建一个普通的SPA单页应用时，就是构建的客户端渲染的应用，CSR客户端渲染Client Side Re
阅读全文
摘要：VueRouter导航守卫 vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航，简单来说导航守卫就是路由跳转过程中的一些钩子函数，路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，而在每一个过程中都有钩子函数，这些钩子函数能使我们在这些过程中进行一些操作，这就是导
阅读全文
摘要：Vue路由懒加载 对于SPA单页应用，当打包构建时，JavaScript包会变得非常大，影响页面加载速度，将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这就是路由的懒加载。 实现方式 Vue异步组件 Vue允许以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你
阅读全文
摘要：v-model数据绑定分析 v-model是Vue提供的指令，其主要作用是可以实现在表单<input>、<textarea>及<select>等元素以及组件上创建双向数据绑定，其本质上就是一种语法糖，既可以直接定义在原生表单元素，也可以支持自定义组件。在组件的实现中，可以配置子组件接收的prop名称
阅读全文
摘要：Vue路由History模式分析 Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，通过引入Vue-router对象模块时配置mode属性可以启用history模式。 描述 Vue-router的hash模式使用URL的Hash来模拟一个完整
阅读全文
摘要：Vue路由Hash模式分析 Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，即使用URL的Hash来模拟一个完整的URL，当URL改变时页面不会重新加载。 描述 Hash符号即#原本的目的是用来指示URL中指示网页中的位置，例如https:
阅读全文
摘要：Vue中computed分析 在Vue中computed是计算属性，其会根据所依赖的数据动态显示新的计算结果，虽然使用{{}}模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的，在模板中放入太多的逻辑会让模板过重且难以维护，所以对于任何复杂逻辑，都应当使用计算属性。计算属性是基于数据的响应式
阅读全文
摘要：Vue父子组件生命周期 Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程，这个过程就是Vue的生命周期，Vue中提供的钩子函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、be
阅读全文
摘要：Vue中数组变动监听 Vue的通过数据劫持的方式实现数据的双向绑定，即使用Object.defineProperty()来实现对属性的劫持，但是Object.defineProperty()中的setter是无法直接实现数组中值的改变的劫持行为的，想要实现对于数组下标直接访问的劫持需要使用索引对每一
阅读全文
摘要：Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符，基本流程是进行模板编译生成AST，生成render函数后并执行得到VNode，VNode生成真实DOM节点或者组件时候使用addEventListener方法进行事件绑定。 描述 v-on与@用于绑定事件监
阅读全文