vue
Zswsown
这个作者很懒,什么都没留下…
展开
-
vue项目打包优化
对于vue, vuex, vue-router,axios等我们可以利用wenpack的externals参数来配置,这里我们设定只需要在生产环境中才需要使用:vue.config.js:// vue.config.jsconst isProduction = process.env.NODE_ENV === 'production';const cdn = { css: [], js: [ 'https://cdn.bootcss.com/vue/2.5.17/.原创 2020-11-04 21:04:39 · 256 阅读 · 0 评论 -
谈谈Vue的优点
轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;双向数据绑定:保留了angular的特点,在数据操作方面更为简单;组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要- 操作数据就能完成相关操作;虚拟DOM:dom操作是非常耗费性能的,不再使用原生的dom操作节点,极大解放dom操作,但具体操.原创 2020-10-24 15:35:47 · 345 阅读 · 0 评论 -
Vue可做的性能优化
编码阶段尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应订阅者watcherv-if和v-for不能连用如果需要使用v-for给每项元素绑定事件时使用事件委托给每一个item添加一个自定义属性(:data-index=“可用从数据库中取来的item的id”),然后在事件代理中过滤掉事件委托的根节点,判断每一个item的data-index值,做出响应SPA页面采用< keep-alive></ keep-alive>缓存.原创 2020-10-24 15:30:33 · 99 阅读 · 0 评论 -
Vue中的事件委托
事件委托:将原本需要绑定在子元素上的事件监听器委托在父元素上,让父元素充当事件监听的职务。优点:当新增加子元素时,不用再对其绑定事件节省大量内存,减少事件注册Vue中是否需要事件委托事件委托有两个主要优点:一个是实用的,它使我们不必分别添加(和删除)这些侦听器。Vue已经帮我们做到了。另一个是性能/内存。但是由于v-vor循环中的每个点击侦听器都将使用相同的回调,因此除非有成百上千的行,否则性能消耗是最小的。最后,您可以通过在元素上添加@click侦听< ul>器而.原创 2020-10-24 14:48:13 · 1236 阅读 · 0 评论 -
浅谈vue中的mixin
Mixin是我们能够为Vue组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项,例如生命周期hook、方法等,则可以将其编写为mixin,并在组件中简单的引用它。调用时将mixin的内容合并到组件中。如果要在mixin中定义生命周期hook,那么它在执行时将优化于组件自己的生命周期。...原创 2020-10-24 10:24:25 · 93 阅读 · 0 评论 -
浅谈SPA的优缺点
SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。优点:用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;基于上面一点,SPA 相对对服务器压力小;前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;原创 2020-10-23 22:26:56 · 958 阅读 · 0 评论 -
浅谈对SSR的理解
SSR指的是服务端渲染,也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成,然后再把HTML直接返回给客户端。SSR的优势更好的SEO(搜索引擎优化)首屏加载速度更快SSR的缺点开发条件会受到限制,服务器端渲染只支持beforeCreate和created这两个钩子函数当我们需要一些外部扩展库时需要特殊处理,服务端渲染应用程序也需要处于Node.js的运行环境会相比于客户端渲染带来更多的服务端负载...原创 2020-10-23 21:40:35 · 938 阅读 · 0 评论 -
对keep-alive组件的了解
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,避免重新渲染 ,其有以下特性:一般结合路由和动态组件一起使用,用于缓存组件;提供 include 和 exclude 属性,两者都支持字符串或正则表达式, include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高;对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 activate原创 2020-10-23 21:03:59 · 109 阅读 · 0 评论 -
Vue模板编译原理
简单说,Vue的编译过程就是将template转换成render函数的过程。首先会解析模板,生成抽象语法树(一种用JavaScript对象的形式来描述整个模板)。使用大量的正则表达式对模板进行解析,遇到标签、文本的时候会调用对应的钩子函数进行相关处理。Vue的数据是响应式的,但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再发生变化,对应的DOM也不会变化。那么优化过程就是深度遍历抽象语法树,按照相关条件对树节点进行标记。这些被标记的节点(静态节点),我们就可以跳过对它们的比对,对原创 2020-10-23 20:41:36 · 1971 阅读 · 0 评论 -
vue路由hash模式和history模式实现原理及区别
hash 模式:#后面 hash 值的变化,不会导致浏览器向服务器发出请求,浏览器不发出请求,就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化,然后根据 hash 变化来实现更新页面部分内容的操作。history 模式:history 模式的实现,主要是 HTML5 标准发布的两个 API,pushState 和 replaceState,这两个 API 可以改变 url,但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作。区别url原创 2020-10-23 20:27:13 · 965 阅读 · 0 评论 -
Vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后执行beforeCreate钩子函数,这个时候,数据还没有挂载,只是一个空壳,无法访问到数据和真实的dom,一般不做操作。接着挂载数据.原创 2020-10-23 15:16:18 · 213 阅读 · 0 评论 -
v-for使用key的原因
1.vue中列表循环需加:key=“唯一标识”, 唯一标识最好是item里面id等。因为vue组件高度复用,增加Key可以标识组件的唯一性,更好地区别各个组件。key的作用主要是为了高效地更新虚拟DOM。2.key主要用来做dom diff算法用的,diff算法是同级比较,比较当前标签上的key还有它当前的标签名,如果key和标签名都一样时只是做了一个移动的操作,不会重新创建元素和删除元素。3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变,Vue不是移动Dom元素来匹配数据项的改原创 2020-10-23 10:27:09 · 537 阅读 · 0 评论 -
Vue中nextTick原理
nextTick作用:在下一次DOM循环更新结束之后执行延迟回调,在修改数据后,调用该方法,可以获得更新后的DOM。原理:在Vue中是以异步执行DOM更新的。异步的执行机制:所有的同步任务都会放在主线程上执行,形成一个执行栈。所有的异步任务会放在主线程外,形成一个任务队列,当异步任务有了结果时,会在任务队列中保存一个事件当执行栈上的同步任务全都执行完毕之后,主线程会来读取任务队列上,看看有哪些事件。那些对应的异步任务会结束等待状态,进入执行栈,开始执行。主线程会不断重复以上步骤。主线原创 2020-10-23 10:00:42 · 122 阅读 · 0 评论 -
子组件为什么不可以修改父组件传递的Prop?怎么理解vue的单向数据流?
Vue提倡单向数据流,父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解如果破坏了单向数据流,当应用复杂时,debug 的成本会非常高...原创 2020-10-22 20:12:02 · 264 阅读 · 0 评论 -
Vue组件中的data为函数不为对象的原因
一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,所有实例都是引用同一个data对象,若data发生改变,会影响到所有创建好的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。当组件被复用创建一个实例时,会在堆上重新申请一块内存,用于保存拷贝好的data,且在栈上会保存一个指向该新创建实例的指针,那么每个实例可以维护一份被返回对象的独立的拷贝,组件实例之间的 data 属性值不会互相影响。...原创 2020-10-22 19:30:55 · 147 阅读 · 0 评论 -
v-for和v-if不建议使用在一起
当 v-for 和 v-if 处于同一个节点时,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中(即会先运行v-for,再运行v-if对每一个item进行判断,决定item(DOM元素)是否要被删除)。如果要遍历的数组很大,而真正要展示的数据很少时,这将造成很大的性能浪费。这种场景建议使用 computed,先对数据进行过滤,再进行判断。...原创 2020-10-22 19:08:20 · 126 阅读 · 0 评论 -
浅谈v-if和v-show
相同:都是控制组件在页面中是否显示不同:v-if是通过判定条件的真假来动态的控制DOM元素在页面中的增删;v-show是通过判定事件的真假来动态的控制DOM元素的样式(display:none/block);频繁的进行增删DOM操作会影响页面加载速度和性能,因此在大多数情况下v-show的性能要比v-if的好只有v-if能和v-else连用进行分支判断,v-show是不能和v-else连用的,如果出现多种条件场景的情况下,可以使用v-if来进行判断使用场景:v-if 适..原创 2020-10-22 16:45:20 · 93 阅读 · 0 评论 -
Vue2.0组件通信的方式
父子组件通信事件机制(父->子props,子->父 $on、 $emit)获取父子组件实例 $parent、 $childrenRef 获取实例的方式调用组件的属性或者方法Provide(祖先组件)、inject(后代组件) (不推荐使用,组件库时很常用)兄弟组件通信eventBus 这种方法通过一个空的 Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,从而实现任何组件间的通信,包括父子、隔代、兄弟组件Vue.prototype.$bus = ne.原创 2020-10-22 16:21:34 · 129 阅读 · 0 评论 -
Vue中computed和watch的区别和运用的场景
computed:是计算属性,依赖其他属性值,并且computed的值有缓存,只有它依赖的属性值发生改变,下一次获取comoputed的值时才会重新计算。watch:没有缓存,更多的是‘观察’的作用,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。若我们需要深度监听对象中的属性时,需要打开deep:true;这样便会对对象中的每一项进行监听。运用场景:当我们需要进行数值计算,并且依赖与其他数据时,应该使用computed,因为可以利用computed的缓存特性,避免每次获取原创 2020-10-22 14:27:22 · 565 阅读 · 0 评论 -
Vue中的响应式数据/数据双向绑定原理
1.Vue中数据双向绑定主要是指当数据发生变化时,视图发生变化;当视图发生变化时,数据也发生响应的变化。其中视图发生变化时,数据发生相应的变化,可以用事件绑定来实现,主要要解决的是当数据发生变化时,视图怎么发生变化。2.先介绍Vue2.0中的数据双向绑定的原理:vue中处理过程的几个关键:监听者Observer:监听者会对Vue实例中data选项的全部属性(包括属性对象的子属性)都加上getter和setter。这样的话,给这个对象的某个属性赋值时,我们就可以监听到数据变化了。解析器Compli原创 2020-10-22 14:12:57 · 626 阅读 · 0 评论 -
阿里云centos上部署nginx和vue项目
1.要在服务器(centos系统)上安装nginx服务器,部署好vue项目,让外网访问到,首先要有服务器,我选择的是阿里云的centos7.5系统的版本,在确认订单那有自定义密码的,要记得登录名和登录密码,在之后连接远程服务器要用到(root为登录名)2.之后要在该服务器上配置好规则,开放端口给外网访问到,nginx服务器默认监听80端口,所以先开放80端口(配置位置在控制台中的本实例安全组中的规则配置)3.配置好开放端口后,再下载Xshell和Xftp,Xshell用来连接远程服务器并用命令行的原创 2020-10-16 13:33:51 · 439 阅读 · 0 评论 -
vue_分页组件
封装的分页组件的结构如下:1.基本分页功能(1)将数组分为指定大小的多个小数组的chunk方法export function chunk(arr=[],size=1){ if(arr.length===0) return []; return arr.reduce((total,currentValue)=>{ if(total[total.length-1].length===size){ total.push([currentValu原创 2020-10-05 12:54:30 · 1625 阅读 · 0 评论 -
Vue中v-slot插槽的使用
Vue中v-slot插槽的使用在vue2.6.0以上版本v-slot将取代slot-scope和slot。这里取代的意思是:v-slot在调用时取代了 slot 和 slot-scope,而在template中声明时仍会用solt进行声明插槽。匿名插槽<!-- 1.匿名插槽 --> <div id="app1"> <cpn1> <template v-slot>原创 2020-07-16 16:03:40 · 945 阅读 · 0 评论