VUE开发 mounted 踩坑记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE开发 mounted 踩坑记相关的知识,希望对你有一定的参考价值。

参考技术A .

最近两周一直在做一个数据统计与管理系统,今天晚上在做一个需求;

场景:在父页面有一些数据表格,数据表格后面有一个操作是跳转到 "我的下级"页面,要求跳转到我的下级页面之后,从我的下级页面

返回到父页面的时候,需要回到父页面跳转之前的位置;(如图;)

当时我的请求什么的都放在mounted里面;我的想法是当我进子页面时把当前的分页(第几页),以及各种搜索条件当做页面跳转的参数发给子页面,

然后由子页面返回的时候再把这些参数赋给父页面的data里面的数据,然后进行Axios请求.(._.)我当时觉得可行,但是在真正做起来的时候出问题了,数据的值是发生变化了,因为我用watch监听了一下;发现 当我从子页面返回的时候,currentPage(分页—当前第几页)是先赋值成默认值1,再

从1赋值成3;我寻思着,这也没错啊,页面初始化渲染先赋值默认值,但是,奇怪的事发生了,我的页面数据显示的是第三页,但是!!!我的分页组件却是第一页高亮!!!

百思不得其解,于是去百度,百度也没有出什么东西.........................................................

于是自己思考这个问题,我就想mounted的性质-------实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问;

然后我就觉得 是不是css样式是跟data里面的默认值一起进行加载然后渲染到DOM上的,然后我mounted的时候css已经跟随着data的原始值

渲染到了DOM上,这样的话虽然我的值虽然改变了,但是css还是按照data默认值进行动态渲染css了...

然后我就用created试了下,果然成功了

因为created的时候VUE实例还没有挂载到DOM上,这时候也可以访问到Data;经过百度后得到了如下结果;

实例创建完成,可访问data、computed、watch、methods上的方法和数据,未挂载到DOM,不能访问到$el属性,$ref属性内容为空数组

也就是说我可以在created的时候更改data的默认值,然后data里面的数据在挂载DOM上的时候已经被改变了,原来如此啊.

前端学习---移动端vue开发踩坑记

前言:

大概两个月前投身于一个项目中去,项目是一个移动端的项目,所选用的框架是时下比较流行的vue。这篇文章也是针对这个项目和以前自己学习时的一些总结,包括一些通用的移动端开发要注意的事项、vue开发遇到的一些问题。本文的目的是为了在以后的开发中我们可以避免这些坑,提高我们的开发效率。

 

一、移动端开发特有问题:

1、移动端样式的兼容性:

在当前移动端的开发要面对各种不同的手机,不同的手机DPI也是不同的,比如Iphone 8的DPI就是2,Iphone 8P的DPI就是3。为了让页面可以兼容不同的手机,解决方案如下:

  1)对手机的视口进行设置强行无视设备的真实分辨率,设置最大最小的缩放比例并且禁止用户进行缩放,从而达到统一的分辨率的效果。

 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,use-scalable=no"

   2)针对不同的手机对2x和3x的图片进行处理:我采用stylus自己定义了一个方法来解决。在需要的地方直接引入即可。

bg-image($url)
  background-image url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image url($url + "@3x.png")

2、移动端点击延时的问题:

这个问题我之前并没有注意到,甚至不知道自己遇到过,我是通过论坛看到移动端开发会出现300ms的延时,往往会造成点击延迟甚至是点击失效的bug。造成这个问题的原因是由于移动端浏览器存在双击缩放的问题。解决这个问题可以采用:

  1)采用一个插件fastclick解决,代码也十分简洁,在入口 注册后,直接采用下面代码。其实也可以自己实现fastclick的功能:自定义click阻止默认click事件的冒泡及默认行为。

fastClick.attach(document.body); 

  2)若是项目的兼容性要求比较低的话,可以加上一个meta标签。

<meta name="viewport" content="width=device-width">

3、在IOS在英文输入首字母大写:

  采用input的autocapitalize属性对首字母大小写进行设置:

<input type="text" autocapitalize="none" class="box">

4、长时间点击页面会发生闪退的问题:

  在进行移动端项目调试的时候,可能出现的一个问题就是长时间按住会出现闪退,可以通过以下代码解决。

element {-webkit-touch-callout: none;}

5、在有输入框时进行其他操作不自动失焦:

  本项目中有一个搜索界面,在搜索时对搜索结果进行下滑,输入框不会自动失焦,手机键盘不会隐藏,于是可以采用对元素进行手动blur。

6、移动端左右滑动会出现白条:

  在项目开发之前可以对项目进行CSSreset:设置html,body的width为100%,overflow:hidden就可以了。

 

 

二、Vue使用时遇到的一些问题:

这部分并不是什么高深的技术文章,而是记录遇到的一些问题。

0、最重要的一点,也是放在最前面:Vue的生命周期真的很重要!很重要!重要!在使用vue进行开发的过程中,项目越大、需要的时间类型越多、数据越多等就会越来越感觉生命周期的重要性。在vue的官方文档中对生命周期有着很详细的说明,大家可以自行阅读。

1、文件路径过于冗长或者相对路径过于麻烦:

  通过webpack自定义路径别名,就可以

// build/webpack.base.js
{
  resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
    alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘,
      ‘@‘: resolve(‘src‘),
      ‘~‘: resolve(‘src/components‘)
    }
  }
}

 

2、组件中的样式会相互影响。

  通过为组件中的style标签添加scoped属性就会是组件的样式不会外溢。Vue的scoped是通过为组件添加唯一的属性标识来实现样式不会污染其他组件同名元素的。

3、vue对输入的文字时时响应:

  用过vue的人都知道,vue有一个非常重要的功能就是实现了双向数据绑定,这对于我们开发来说有着很重要的用途。但是我在进行一个搜索组件开发的过程中就发现了一个问题,由于搜索的数据是通过线上抓取的,当在输入框输入要搜索的信息时,搜索列表会自动加载出来。每次按键都会发送一个请求,这样就大大增加了流量的消耗。于是我采用了一个数据节流的方法,设置了一个延时函数,每0.3S对输入的数据进行检查,而不是同步数据绑定。

4、Vuex的使用:

  Vuex对于vue,就相当于Redux对于react一样。它是vue的状态管理模式,在多个组件共享状态的情况下,采用vuex就显得非常重要了。

  因为组件一旦多了起来,不同组件之间数据的流动就会变得十分繁琐并且难以维护,尤其是在兄弟组件进行通信时,就显得格外麻烦。当兄弟组件进行通信时,首先需要一个父组件,子组件通过$dispatch向父组件进行通信,然后再由父组件进行广播事件$broadcast传递给各个子组件。真个过程十分繁琐并且难以调试。

  在使用vuex遇到了这个问题:对vuex的使用时每次Store载入新的数据都会造成卡屏的现象,在了解vue的原理后知道这是由于为了得到数据到试图的响应式变化, 会对Store中的每个对象添加setter和getter方法以实现对数据的监听(脏检查),但是有大量数据进入store的时候, 对每个对象都进行这样的操作会消耗大量的时间,因此造成卡屏的现象。我想采用的方法是是应用freeze方法冻结对象, 避免vue对每个对象都进行操作,不直接访问state里的属性,而是采用改变Index使vue的getter间接访问。

5、父子元素同时绑定click事件:

  在开发的过程中,我们经常会遇到父子元素都绑定一个事件,当点击子元素的时候由于事件的冒泡机制会造成对父元素事件的触发。在原生JS中我们可以采用event.stopPropagation()阻止时间冒泡。那么在vue中如何解决这个问题。我们只需要在click后面加上一个.stop就可以了。

 

以上就是最近一段时间针对移动端开发和vue使用所遇到的一些情况。如果有不会的地方,可以留言给我,或给我发邮件[email protected]。让我们共同进步!^_^

 如果文章对您来说有用的话可以给我一个star吗?https://github.com/lml19960131/music-ml

以上是关于VUE开发 mounted 踩坑记的主要内容,如果未能解决你的问题,请参考以下文章

前端学习---移动端vue开发踩坑记

Vue踩坑记

vue项目打包踩坑记

vue-CLI踩坑记

vue.js环境搭建踩坑记

vue-element-admin踩坑记:1.打包后白屏