VUE
innagine
这个作者很懒,什么都没留下…
展开
-
VUE基础(9):SPA(单页面应用)与MPA(多页面应用)
一、什么是SPA释义:SPA(singgle-page application),单页面应用。SPA是一种网络应用程序或网站模型,它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验。在单页面应用中,所有必要代码(HTML、JavaScript和CSS)都通过单个页面的加载而检索,或者根据需要(通常是为了响应用户操作)动态装载适当的的资源并添加到页面中。页面在任何时间点都不会重新加载,也不会控制转移到其他页面。举个栗子:SPA保温杯,而上面的 数据图片等内容枸杞跟茶,保温杯的原创 2020-12-08 14:53:20 · 2504 阅读 · 1 评论 -
VUE基础(8):Vue中的key的作用
key是为Vue的vnode标记的唯一ID,通过这个key,我们的diff操作可以更准确、更快速。diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行对比,然后找出差异。(diff程可以概括为:oldCh和newCh各有两个头尾的变量StartIdx和EndIdx,它们的2个变量相互⽐较,⼀共有4种 ⽐较⽅式。如果4种⽐较都没匹配,如果设置了key,就会⽤key进⾏⽐较,在⽐较的过程中,变量会往中间靠, ⼀旦StartIdx>EndIdx表明oldC原创 2020-12-07 12:32:14 · 455 阅读 · 2 评论 -
VUE基础(7):VUE的变化侦测原理
一、既然Vue通过数据劫持可以准确探测数据的变化,为什么还需要虚拟DOM进行diff检测差异?现代前端框架有两种方式侦测变化,一种是pull,一种是push。**1.pull:**其代表为React,我们可以回忆一下React是如何侦测到变化的,我们通常会用 setState API 显式更新,然后React会进行一层层的Virtual Dom Diff 操作找出差异,然后 Patch 到 DOM 上,React从一开始就不会知道到底哪里发生了变化,只是知道 “有变化了”,然后再进行比较暴力的 Diff原创 2020-12-06 17:45:20 · 668 阅读 · 3 评论 -
VUE基础(6):VUE的响应式系统
一、响应系统简述1.任何一个Vue Component 都有一个与之对应的Watcher实例。2.Vue的data上的属性会被添加 getter 和 setter 属性。3.当 Vue Component render 函数被执行的时候,data上会被接触(touch),即被读,getter 方法会被调用,此时Vue会去记录此Vue Component 所依赖的所有data(这一过程被称为依赖收集)。4.data 被改动时(主要是用户操作),即被写,setter 方法会调用,此时Vue会通知所有依赖原创 2020-12-06 17:02:17 · 438 阅读 · 0 评论 -
VUE基础(5):Proxy与Object.defineProperty的优劣对比
一、Proxy的优势如下:1.Proxy可以直接监听对象⽽⾮属性 。2.Proxy可以直接监听数组的变化 。3.Proxy有多达13种拦截⽅法,不限于apply、ownKeys、deleteProperty、has等等是 Object.defineProperty 不具备的 。4.Proxy返回的是⼀个新对象,我们可以只操作新的对象达到⽬的,⽽ Object.defineProperty 只能遍历对象属性直接修改。5.Proxy作为新标准将受到浏览器⼚商重点持续的性能优化,也就是传说中的新标准的性原创 2020-12-05 14:58:36 · 1121 阅读 · 0 评论 -
VUE基础(4):实现双向绑定
一、Vue是如何实现双向绑定的?利⽤ Object.defineProperty 劫持对象的访问器,在属性值发⽣变化时我们可以获取变化,然后根据变化进⾏后续响应,在 vue3.0中通过Proxy代理对象进⾏类似的操作。// 这是将要被劫持的对象 const data = { name: '', };function say(name) { if (name === ' 古 天 乐 ') { console.log('给⼤家推荐⼀款超好玩的游戏 '); } else if (name ===原创 2020-12-05 14:47:13 · 2955 阅读 · 18 评论 -
VUE基础(3):computed与watch
一、computed1.computed是计算属性,也就是计算值,他更多用于计算值的场景。2.computed具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算。3.computed适用于计算比较消耗性能的计算场景。二、watch1.watch更多的是“观察”的作用,类似于某些数据的监听回调,用于观察props、$emit或者本组件的值,当数据变化时来执行回调进行后续操作。2.无缓存性原创 2020-12-05 14:08:16 · 262 阅读 · 0 评论 -
VUE基础(2):组件间通信
一、props/$emit父组件通过props的方式向子组件传递数据,而子组件可以通过$emit向父组件通信。1.父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:[‘红楼梦’,‘西游记’,‘三国演义’]// section父组件<template> <div class="section"> <com-article :articles="art原创 2020-12-02 15:02:45 · 131 阅读 · 0 评论 -
VUE基础(1):VUE的生命周期
一、原创 2020-12-01 23:49:03 · 315 阅读 · 2 评论