Vue首屏性能优化组件
Vue首屏性能优化组件简单实现一个Vue首屏性能优化组件，现代化浏览器提供了很多新接口，在不考虑IE兼容性的情况下，这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情，当然为了考虑IE我们也可以在封装组件的时候为其兜底，本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口。
描述先考虑首屏场景，当做一个主要为展示用的首屏时，通常会加载较多的资源例如图片等，如果我们不想在用户打开时就加载所有资源，而是希望用户滚动到相关位置时再加载组件，此时就可以选择IntersectionObserver这个接口，当然也可 ...
VueRouter导航守卫
VueRouter导航守卫vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航，简单来说导航守卫就是路由跳转过程中的一些钩子函数，路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，而在每一个过程中都有钩子函数，这些钩子函数能使我们在这些过程中进行一些操作，这就是导航守卫。
描述vue-router一套钩子来触发路由在不同阶段触发的函数，导航守卫分成三大块：全局守卫、路由独享守卫和组件内守卫。全局守卫顾名思义所有路由在进入跳转的时候都会触发，整个全局路由分为三个阶段依次是beforeEach、beforeResolve、afterEach。路由独享守卫顾名思义只 ...
Vuex和普通全局对象
Vuex和普通全局对象在构建应用时，组件化与模块化开发以及多人开发各自组件的时候，不难保证各个组件都是唯一性的，多个组件共享状态肯定是存在的，而对多个共享状态进行维护是非常麻烦的，共享状态是谁都可以进行操作和修改的，这样就会导致所有对共享状态的操作都是不可预料的，所以就需要一个统一的管理进行维护。
描述在大量的业务场景下，不同的模块组件之间确实需要共享数据，也需要对其进行修改操作。也就引发软件设计中的矛盾：模块组件之间需要共享数据和数据可能被任意修改导致不可预料的结果。为了解决其矛盾，软件设计上就提出了一种设计和架构思想，将全局状态进行统一的管理，并且需要获取、修改等操作必须按我设计的套路来， ...
LocalStorage与SessionStorage
localStorage与sessionStoragelocalStorage和sessionStorage是HTML5提供的对于Web存储的解决方案。
相同点
都与HTTP无关，是HTML5提供的标准，当发起HTTP请求时不会与Cookie一样自动携带。
都是以键值对的形式存在，即Key-Value形式，常用的Api也相同。
存储类型都是String类型，当进行存储时，会调用toString()方法转为String类型。
对于每个域容量是有限的，不同浏览器不一样，大部分存储为5M左右。
不同点
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
Se ...
MVVM模式的理解
MVVM模式的理解MVVM全称Model-View-ViewModel是基于MVC和MVP体系结构模式的改进，MVVM就是MVC模式中的View的状态和行为抽象化，将视图UI和业务逻辑分开，更清楚地将用户界面UI的开发与应用程序中业务逻辑和行为的开发区分开来。
描述MVVM模式简化了界面与业务的依赖，有助于将图形用户界面的开发与业务逻辑或数据模型的开发分离开来。在MVVM中的ViewModel作为绑定器将视图层UI与数据层Model链接起来，在Model更新时，ViewModel通过绑定器将数据更新到View，在View触发指令时，会通过ViewModel传递消息到Model，ViewMode ...
Vue3.0新特性
Vue3.0新特性Vue3.0的设计目标可以概括为体积更小、速度更快、加强TypeScript支持、加强API设计一致性、提高自身可维护性、开放更多底层功能。
描述从Vue2到Vue3在一些比较重要的方面的详细对比。
生命周期的变化
Vue2 -> Vue3
beforeCreate -> setup
created -> setup
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDe ...
v-html可能导致的问题
v-html可能导致的问题Vue中的v-html指令用以更新元素的innerHTML，其内容按普通HTML插入，不会作为Vue模板进行编译，如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代。
描述易导致XSS攻击v-html指令最终调用的是innerHTML方法将指令的value插入到对应的元素里，这就是容易造成xss攻击漏洞的原因了。Vue在官网对于此也给出了温馨提示，在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击，只在可信内容上使用v-html，永不用在用户提交的内容上。关于XSS，跨站脚本攻击XSS，是最普遍的Web应用安全漏洞。这类漏洞能够使得攻击 ...
data为何以函数形式返回
data为何以函数形式返回在使用Vue构建组件化应用时，每个组件的data属性都是以函数形式返回的，这主要是在组件化实现的时候，每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。
Vue简单实例在一个Vue简单实例中，也就是不使用组件化实现的时候，data可以是一个对象，因为本身也只有一个实例，就不存在多个实例共享的问题。
1234567891011121314151617181920<!DOCTYPE html><html><head> <title>Vue</title></head>< ...
Vuex中的核心方法
Vuex中的核心方法Vuex是一个专为Vue.js应用程序开发的状态管理模式，其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的核心就是store仓库，store基本上就是一个容器，它包含着你的应用中大部分的状态state。
描述在大量的业务场景下，不同的模块组件之间确实需要共享数据，也需要对其进行修改操作。也就引发软件设计中的矛盾：模块组件之间需要共享数据和数据可能被任意修改导致不可预料的结果。为了解决其矛盾，软件设计上就提出了一种设计和架构思想，将全局状态进行统一的管理，并且需要获取、修改等操作必须按我设计的套路来，就好比马路上 ...
v-if和v-show的区别
v-if与v-show的区别v-if指令与v-show指令都可以根据值动态控制DOM元素显示隐藏，v-if和v-show属于Vue的内部常用的指令，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。
描述v-ifv-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy值的时候被渲染。
12<div v-if="show">show</div><div v-else>hide</div>
v-showv-show指令用法大致一样，不同的是带有v-show指令的元素始终会被渲染并保留在DOM中 ...