vue
文章平均质量分 69
前端对象
一棵树,站成永恒
展开
-
vue的运行机制简述
一、vue初始化做了什么?1、创建Vue实例对象2、init过程会初始化生命周期,初始化事件中心,初始化渲染、执行beforeCreate周期函数、初始化 data、props、computed、watcher、执行created周期函数等。3、初始化后,调用mount方法对Vue实例进行挂载(挂载的核心过程包括模板编译、渲染以及更新三个过程)。4、如果没有在Vue实例上定义render方法而是定义了template,那么需要经历∗∗编译阶段∗∗。需要先将template字符串编译成renderfu.原创 2021-04-26 10:42:28 · 740 阅读 · 0 评论 -
vue电商—商品详情实现电商图片放大镜,移入放大效果,移出放大消失
方法一、封装成组件页面使用该组件放大镜组件代码 方法二、使用vue插件vue-piczoom1、安装vue-piczoomnpm install vue-piczoom --save2、使用组件默认是100%的高宽,所以建议将组件包含在一个有固定高宽的容器内。如: import PicZoom from 'vue-piczoom'export default { name: 'App', components: { PicZoom }}.原创 2021-04-25 17:30:17 · 858 阅读 · 0 评论 -
移动端使用better-scroll插件水平滑动
移动端项目开发中,处理滚动列表是再常见不过的需求。1、better-scroll 常见的 html 结构:2、安装better-scroll插件 npm i better-scroll -D页面引入import BScroll from “better-scroll”;2、初始化better-scrollbetter-scroll 的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已原创 2021-04-25 17:05:35 · 504 阅读 · 0 评论 -
实现页面平滑滚动到某个位置
背景:在一些项目中,在页面的右下角会有一个返回顶部的按钮。点击这个按钮,页面会平滑的滚动到顶部。我们向大家介绍了页面平滑滚动的2种方法。一、window.scrollTo()window.scrollTo(x, y) 可以通过传入文档(HTML 中的 document)中的x轴坐标和y轴坐标将页面滚动到某个位置。该 API 还支持传入一个 options 对象,其中left属性等同于x轴坐标;top属性等同于y轴坐标;behavior 属性表示滚动行为,其类型为 String,可选值有 3 个:smo原创 2021-04-22 13:49:31 · 1040 阅读 · 0 评论 -
深入理解vue中的slot插槽
在vue中,有一个插槽的概念。什么是插槽?插槽是子组件提供给父组件使用的一个占位符,父组件可以在这个占位符中填充任何模板代码,如HTML,组件等,填充的内容会替换子组件中的slot标签。也就是说插槽是组件的一块HTML模板,这块模板显示不显示,怎么显示由父组件来决定。插槽有普通插槽(匿名插槽、具名插槽)和作用域插槽。一、匿名插槽匿名插槽,也可以叫它默认插槽,或者与单个插槽(vue的官方叫法),我们可以叫它匿名插槽。因为它不用设置name属性。单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一原创 2021-04-17 13:46:12 · 257 阅读 · 0 评论 -
Vue中computed和watch的区别
一、计算属性computed :1.结合源码分析, 支持缓存,只有依赖数据发生改变,才会重新进行计算得到新值,新值和旧值进行比较,如果相等,取缓存,不会重新渲染视图,反之,渲染视图(这是vue后来的优化,之前是只要依赖数据发生变化,便会重新渲染视图)2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值4. 如果一个属性是原创 2021-03-17 22:42:55 · 111 阅读 · 0 评论 -
Vue.nextTick 的原理和用途
一、问题及原因在项目中,我们会发现sopPopups的值在被修改为true后,结果打印出来的sopPopups值还是之前的false,但是在this.$nextTick中打印sopPopups的值为true。这是为什么呢??原因:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新,dom更新是一个异步过程。具体来说,异步执行的运行机制如下(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。(2)主线原创 2021-03-16 22:55:51 · 440 阅读 · 0 评论 -
异步组件的用法
随着项目越来越大,性能问题已经成为了困扰业务发展的重要因素。业务发展、用户体验都非常迫切的需要释放页面的负载,提高页面加载速度。vue项目中,异步组件的使用有利于项目的性能优化。一、什么是异步组件异步组件就是定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行加载渲染并缓存,缓存是以备下次访问。结合vue的源码分析,异步组件的本质是:实现了2次渲染,先渲染成注释节点(占位),当组件渲染成功后,调用forceRender重新渲染二、异步组件的三种方法1、工厂函数实现在大型应用中,.原创 2021-03-13 17:54:09 · 3689 阅读 · 0 评论 -
性能优化实战
互联网项目,最重要的便是用户体验。对于网站的性能,在行业内有很多既定的指标,但就以前端er而言,我们应该更加关注以下指标:白屏时间、首屏时间、整页时间、DNS时间、CPU占用率。今天,我们将从性能优化的以下方面展开介绍一、网络传输性能优化1、善用缓存,不重复加载相同的资源浏览器的缓存策略(1)为了避免用户每次访问网站都得请求文件,我们可以通过添加 Expires 或 max-age 来控制这一行为。Expires 设置了一个时间,只要在这个时间之前,浏览器都不会请求文件,而是直接使用强缓存。而原创 2021-03-01 23:38:42 · 289 阅读 · 1 评论 -
我在项目中是这样配置Vue
在开发vue项目的时候,对整个项目会有一些配置。这对整个项目是有很大的帮助的一、启用gzip压缩,让页面加载更快一般来说,gzip的开启只要服务端去做就好,但是服务端需要先根据设置好的压缩等级去压缩文件,然后再将压缩文件返回到浏览器。而这里,webpack的CompressionWebpackPlugin插件可以帮我们生成gzip的压缩文件。可以如果提前将压缩文件存放在服务器中,服务器在处理请求的时候将节省资源的压缩时间,直接读取服务器上的.gz文件。在vue-cli2中,只需要将config/ind原创 2021-02-26 15:44:14 · 321 阅读 · 0 评论 -
vue单页面使用loaction.href跳转新页面,返回原来页面后,页面不刷新
在vue项目中,有时我们会遇到这样的问题:没有使用keep-alive。在微信浏览器或者在企业微信环境下,在A页面中用window.location.href跳转到新页面B,然后点击浏览器返回按钮回到之前的页面A,这时,我们会发现用nginx起的服务页面会不刷新,在用node起服务中页面是正常刷新的。为什么会出现这样的问题呢?是因为微信浏览器对页面进行了缓存。解决方法:...原创 2020-12-22 10:55:20 · 3063 阅读 · 0 评论 -
vue禁止某个页面通过浏览器返回
需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换1、.在路由配置中给这个当前路由添加meta信息2、在全局的router.beforeEach 函数里面获取allowBack的状态,同时更新vuex的allowBack的值注意写在next()的后面,因为写在next()前面location.href并不是to的地址,这点跟vue1.0有点不同。location.href 获取的仍不是to的地址,所以得根据to的信息来拼起来3、在app.vue的mounted里面写onpopst原创 2020-12-03 16:49:18 · 1081 阅读 · 0 评论 -
vue使用install函数把组件做成插件方便全局调用(封装公用组件)
在项目中,我们有时需要把自定义组件做成插件,方便全局使用。下面以弹框提示为例。一、在components文件夹中新建alert.vue,用作弹框提示组件的样式,内容,功能。二、在同级目录下建alert.js文件。这里是核心思想...原创 2020-06-29 23:54:38 · 881 阅读 · 0 评论 -
vue首页加载优化
vue项目将打包代码部署上线后访问项目,会发现页面会出现长时间的空白等待。这个严重影响了用户的体验。可以通过下面方法优化。一、引入cdn。链接https://www.bootcdn.cn/造成加载时间过慢的元凶是vendor文件,该文件存放的是项目中所有的第三方依赖。比如vuex、vue-router、jquery等。优化的一个要点就是分离第三方依赖。但是分离的时候要考虑到,即便将依赖分离后依...原创 2019-12-27 22:12:06 · 428 阅读 · 0 评论 -
vue使用jquery
vue开发特点之一就是数据驱动。而jQuery开发特点是操作页面dom元素,对数据进行处理。这是两种截然不同的开发模式,所以建议在vue开发中,尽量不要使用jQuery。如果一定要用,使用步骤如下:1、安装jQuerynpm i jquery -S2、修改jQuery配置,打开build/webpack.base.conf,声明jQuery3、vue模板中使用,在mounted生命周期内...原创 2019-12-25 21:52:41 · 124 阅读 · 0 评论 -
vue图片懒加载
什么是图片懒加载,通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张设置好的图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。比如一个页面中有很多图片,如果一上来就发送这么多请求,页面加载就会很漫长。图片懒加载不仅可以减轻服务器的压力,而且可以让加载好的页面更快地呈现在用户面前。...原创 2019-11-15 20:39:47 · 1959 阅读 · 0 评论 -
vue-router之滚动行为
vue-router作为vue全家桶重要组成部分,其重要性不必多说。在项目的开发中,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 我们可以再路由中添加滚动行为scrollBehavior。import Vue from ‘vue’import Router from ‘vue-router’const Idex = ()=>import(’…’)...原创 2019-07-20 11:01:57 · 271 阅读 · 0 评论 -
vue中keep-alive页面数据缓存
在在做商城退换货的项目开发过程中,当用户提交退换货申请信息后进入下一步确认页面,这时候用户需要返回上一步进行信息的修改,由于vue返回上一页的时候,默认都会重新执行生命周期,重新加载数据,为了更好的体验,要让上一页的数据存在。这时候我们可以采用keep-alive 的方法。我们需要考虑两点:一是哪个页面需要缓存数据;二是是否第一次进入这个页面。1、缓存部分页面,可以在路由中设置一个参数控制 ...原创 2019-08-25 15:24:21 · 735 阅读 · 1 评论