dyChao

Vue中$nextTick的理解Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行，也就是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，能够获取更新后的DOM。简单来说就是当数据更新时，在DOM中渲染完成后，执行回调函数。 描述通过一个简单的例子来演示$nextTick方法的作用，首先需要知道Vue在更新DOM时是异步执行的，也就是说在更新数据时其不会阻塞代码的执行，直到执行栈中代码执行结束之后，才开始执行异步任务队列的代码，所以在数据更新时，组件不会立即渲染，此时在获取到DOM结构后取得的值依然是旧的值，而在$nextTick方法中设定的回调函数 ...

Vue为何采用异步渲染Vue在更新DOM时是异步执行的，只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一个watcher被多次触发，只会被推入到队列中一次，这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的，然后，在下一个的事件循环tick中，Vue刷新队列并执行实际(已去重的)工作，Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用setTimeout(fn, 0)代替。 描述对于Vue为何采用异步渲染，简单来说就是为了提升性能，因 ...

Vue事件绑定原理Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符，基本流程是进行模板编译生成AST，生成render函数后并执行得到VNode，VNode生成真实DOM节点或者组件时候使用addEventListener方法进行事件绑定。 描述v-on与@用于绑定事件监听器，事件类型由参数指定，表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略，用在普通元素上时，只能监听原生DOM事件，用在自定义元素组件上时，也可以监听子组件触发的自定义事件，在监听原生DOM事件时，方法以事件为唯一的参数，如果使用内联语句，语句可以访问一个$event propert ...

Vue数据双向绑定Vue是通过数据劫持的方式来实现数据双向数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，该方法允许精确地添加或修改对象的属性，对数据添加属性描述符中的getter与setter实现劫持。 描述运行一个Vue实例并将data打印，可以看到对象中对于msg有了get与set，通过他们就可以实现数据的劫持，从而进行数据的更新，在Vue中get与set是通过ES5的Object.defineProperty()方法定义的，该方法的具体功能可以查阅https://github.com/WindrunnerMax/EveryDay/b ...

JSON WEB TOKENJSON WEB TOKEN简称为JWT，是一个基于JSON的开放标准，用于通信双方之间传递安全信息的简洁的、URL安全的表述性声明规范，经常用于身份验证。 结构JWT有三部分组成，他们之间用.分隔，这三部分分别是Header、Payload、Signature，结构如下： 1Header.Payload.Signature 在jwt.io给予的实例 1eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MD ...

Cookie与Session会话跟踪是Web程序中常用的技术，HTTP协议是无状态的，确定用户身份就需要跟踪用户的整个会话。最常用的会话跟踪是使用Cookie与Session，简单来说Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。 Cookie由于HTTP协议是无状态的，一旦数据交换完毕，此次链接就会关闭，再次交换数据就需要重新连接，意味着服务器无法从链接上跟踪会话。假如A与B同时购买了一件商品，不进行会话跟踪的话服务器就无法判断究竟是谁购买了此商品。服务端为进行会话跟踪，给每个客户端颁发一个通行证，每个人访问必须携带通行证，这样服务端就能区别 ...

Vue路由Hash模式分析Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，即使用URL的Hash来模拟一个完整的URL，当URL改变时页面不会重新加载。 描述Hash符号即#原本的目的是用来指示URL中指示网页中的位置，例如https://www.example.com/index.html#print即代表example的index.html的print位置，浏览器读取这个URL后，会自动将print位置滚动至可视区域，通常使用<a>标签的name属性或者<div>标签的id属性指定锚点。通过window.l ...

Vue路由History模式分析Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，通过引入Vue-router对象模块时配置mode属性可以启用history模式。 描述Vue-router的hash模式使用URL的Hash来模拟一个完整的URL，当URL改变时页面不会重新加载，而Vue-router的history模式是充分利用history.pushState的API来完成URL跳转，同样在页面跳转时无须重新加载页面，当然也不会对于服务端进行请求，当然对于history模式仍然是需要后端的配置支持，由于应用是个单页客户端应用，如果后 ...

SPA单页应用的优缺点Single Page Web Application是一种特殊的Web应用，其所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS文件，一旦页面加载完成，SPA不会进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML，默认Hash模式是采用锚点实现路由以及元素组件的显示与隐藏实现交互，简单来说SPA应用只有一个页面，通常多页面应用会有多个页面不断跳转，而单页面应用始终在一个页面中，默认Hash模式是通过锚点实现路由以及控制组件的显示与隐藏来实现类似于页面跳转的交互。 优点 良好的交互体验，页面首次 ...

Vue路由懒加载对于SPA单页应用，当打包构建时，JavaScript包会变得非常大，影响页面加载速度，将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这就是路由的懒加载。 实现方式Vue异步组件Vue允许以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。 12345678Vue.component("async-example", function (resolve, reject) { setTimeout(functio ...