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中 ...
字符串转数字
Js将字符串转数字的方式Js字符串转换数字方方式主要有三类:转换函数、强制类型转换、弱类型隐式类型转换,利用这三类转换的方式可以有5种转换的方法。
parseInt()parseInt()和Number.parseInt()是最常用的转换字符串为整数数值的方法,其中Number.parseInt()是ES6之后为了减少全局方法的定义才增加的静态方法,实质与全局方法parseInt()相同,他们的规则如下:
忽略字符串前面的空格,直至找到第一个非空字符。
如果第一个非空字符不是数字或者是正负号则返回NaN。
如果第一个是数字字符一直解析到一个非数字字符。
如果第一个是数字字符,能识别出各种整数 ...
v-model数据绑定分析
v-model数据绑定分析v-model是Vue提供的指令,其主要作用是可以实现在表单<input>、<textarea>及<select>等元素以及组件上创建双向数据绑定,其本质上就是一种语法糖,既可以直接定义在原生表单元素,也可以支持自定义组件。在组件的实现中,可以配置子组件接收的prop名称,以及派发的事件名称实现组件内的v-model双向绑定。
描述可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定,其会根据控件类型自动选取正确的方法来更新元素,以<in ...