当前位置:首页 > 前端技术 > vue踩坑总结 & 优化点

vue踩坑总结 & 优化点

2022年09月16日 09:45:22前端技术6

最近连着做了好几个vue项目,从0到版本迭代,vue教程算是好理解,把vue官方文档看一遍下来,基本上不会有什么大问题(嗯如果你看的够仔细够透彻的话),此篇是记录vue踩过的坑以及可以优化的地方。

1.踩坑

1.1.深拷贝/浅拷贝

这实际上算不上vue的问题,算是js基础没打好的坑吧。

先来看一个简单的例子:

let obj = {name:'fiona-SUN'};
let copyObj = obj;
copyObj.name = 'fiona';
console.log(copyObj.name);  // 'fiona'
console.log(obj.name);     // 'fiona'

在js中也有栈(stack)和堆(heap)的概念:

  • 栈:自动分配的内存空间,大小确定会自动释放。存放变量/局部变量/形参等。在js中存放简单数据段(五种基本数据类型:Number、String、Boolean、Null、Undefined),他们是按值存放的,可以直接访问。
  • 堆:动态分配的内存,大小不定并且不会自动释放。存放在堆内存中的对象,栈中的变量实际保存的是一个指针,这个指针指向堆中的某一个位置。

所以上述例子中,属于浅拷贝,当我们声明一个对象,由于他不属于五种基本数据类型(即非简单数据段),栈中会存放一个我们声明的obj变量,它指向了堆中实际的这个对象的地址。当我们把这个引用地址赋值给了copyObj,实际它获得的是一个与obj一致的指向堆中的地址。当copyOjb改变了指向的对象地址的实际的值的时候,obj拿到的值也就自然而然变化了。看图理解⬇

vue踩坑总结 & 优化点 _ JavaClub全栈架构师技术笔记

嗯,道理我都懂,但是写代码我就自然而然的忽略了,该反思。。。

深拷贝的方法

  • 方法一:逐个去拿到简单数据项(网上可以搜到递归解决,思路类似)
let obj = {name:'fiona-SUN'};

let copyFunc = (originObj) => {
  let copyObj = {};
  for(let key in originObj){
    copyObj[key] = originObj[key];
  }
  return copyObj;
};

let copyObj = copyFunc(obj);
copyObj.name = 'fiona';
console.log(copyObj.name);  // 'fiona'
console.log(obj.name);     // 'fiona-SUN'
  • 方法二:通过JSON去解析
let obj = {name:'fiona-SUN'};

let copyObj = JSON.parse(JSON.stringify(obj));

copyObj.name = 'fiona';
console.log(copyObj.name);  // 'fiona'
console.log(obj.name);     // 'fiona-SUN'
  • 方法三:es6之展开Object.assign(拷贝obj的内容到一个新的堆内存,copyObj存储新内存的引用)
let obj = {name:'fiona-SUN'};

let copyObj = Object.assign({}, obj);

copyObj.name = 'fiona';
console.log(copyObj.name);  // 'fiona'
console.log(obj.name);     // 'fiona-SUN'
  • 方法四:es6之展开运算符(仅用于数组)
let arr = [1,2,3];
let copyArr = [...obj];
copyArr[2] = 0;
console.log(copyArr[2]);  // 0
console.log(arr[2]);     // 2

1.2.列表更新检测

1.2.1数组更新检测

以下摘自vue官网API

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

  1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题,你可以使用 splice:

example1.items.splice(newLength)

触发视图更新的方法:

  1. 变异方法
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
  1. vue提供的set方法
  • Vue.set( target, key, value )
1.2.2对象更新检测

还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

解决方法:

  1. vue提供的set方法
  • Vue.set( target, key, value )
  1. Object.assign()
  • bject.assign({}, target, {key:value})

1.3.页面刷新vuex被清空

这真的是遇到一个很坑的问题,同一个页面(router未改变),一旦刷新(刷新或深度刷新),存储的vuex就马上和你说拜拜

  • localStorage
    网上推荐最多的方法就是用localStorage。但是我个人觉得不太合适,还得看项目吧。localStorage是永久存储的。

  • 数据重新获取
    我使用的方法是在需要某些数据之前先判断一下数据是否存在,如果不存在重新获取。

1.4nextTick适当使用

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

简而言之,等待DOM更新之后再进行操作。

1.5.异步问题

这个是一个亘古不变的话题。

请求后台数据异步,常不经意的带来了问题。(处理异步的方法就不详细描述了,网上一搜一大堆)

1.6.组件之间的调用方式

1.6.1.父子组件
  • prop向下传递,事件向上传递
  • 子组件添加ref属性,父组件可以获取到子组件的实例(不建议)
  • 插槽slot 作用域插槽
1.6.2.非父子组件
  • 使用状态管理
  • 实例化一个公共vue实例

1.7.计算属性设置值

计算属性是基于它们的依赖进行缓存的,一旦依赖发生变化,计算属性会重新计算

想要改变计算属性的值。要通过set方法去触发它所依赖的变量,(类似于触发它重新计算,单纯赋予一个新值,在取的时候也是不会被改变的)

1.8.vue文件中内联样式中有无scoped属性的差别

  • 有scoped属性:
    当前仅当该vue文件可以使用这个样式。
  • 无scoped属性:
    影响其他文件

1.9 v-for v-key

当 Vue.js 用v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):

1.10 v-for 和 v-if

当它们处于同一节点,v-for的优先级比v-if更高。

1.11 js文件中引入的css不会自动加前缀(新的脚手架已解决该问题)

无论是开发环境还是生成环境都不会自动加前缀,因为vue-loader只管.vue文件里面的样式,没有自动执行autoprefixer loader

参考链接

在build/utils.js下引入postcss-loader

var postcssLoader = {
    loader: 'postcss-loader',
    options: {
        plugins: (loader) => [
            require('autoprefixer')()
        ],
        sourceMap: true
    }
}

如果还有问题在改成

var postcssLoader = {
    loader: 'postcss-loader',
    options: {
        plugins: (loader) => [
            require('autoprefixer')({
                browsers: [
                    // 加这个后可以出现额外的兼容性前缀
                    "> 0.01%"
                ]
            })
        ],
        sourceMap: true
    }
}

1.12 组件、prop大小写不敏感,事件敏感

对于组件和prop而言,html上用kebab-case (短横线分隔命名) ,其对应的js上要用

(HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:)

【但是:如果你使用字符串模板,那么这个限制就不存在了。】

components: {
    kebabCase
}

---

prop: ['kebabCase']

跟组件和 prop 不同,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

跟组件和 prop 不同,事件名不会被用作一个 JavaScript 变量名或属性名,所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此,我们推荐你始终使用 kebab-case 的事件名。

1.13 refs是静态节点

refs是静态节点

1.14 prop值的改变--不是立即

如果父组件中给子组件传递了一个prop的值,然后调用子组件的方法去获取该值,会发现值没有立即改变。

解决方法:

  1. 可以监听值的改变去调用相应子组件的方法
  2. 将子组件相关方法的调用放在nextTick里面

1.16 fetch兼容

在vue-cli中使用fetch方式请求的时候。存在一定的兼容问题。

可以在build/webpack.base.conf.js中添加一个plugins

plugins:[
new webpack.ProvidePlugin({
  fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
  Promise:  'imports-loader?this=>global!exports-loader?global.Promise!es6-promise',
})
]

1.17 字符串模板

字符串模板

1.18 对象中某属性值的监听

普通的watch中只能监听到某对象的变化才会调用,当想监听对象以及对象中属性的变化都调用函数时,可以使用deep:true

data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: 'local'
    }   
    }
},
watch: {
  bet: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
    deep: true
  }
}

1.19 this.$forceUpdate

强制刷新页面,触发页面重新渲染。

1.20 vue中的beforeRouteUpdate

xxx/detail/123xxx/edit/123都用了同一个组件,beforeRouteUpdate不生效,但是watch $route是生效的?

扩展: 可以考虑在路由定义处使用别名 alias

alias DOC

官方解释

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

相关链接

1.21组件自身调用自身

example

在js中对组件命名(设置name属性)即可以调用自身

1.22 vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。

  • 解决方法:使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。(key特殊属性主要用在vue的虚拟DOM算法,在新旧nodes对比时辨别VNodes)

常见的场景:

  1. v-for下,有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。
  2. 它也可以用于强制替换元素/组件而不是重复使用它
    1. 完整地触发组件的声明周期钩子
    2. 触发过渡
  3. 几乎完全一样/一样的两个html结构元素

1.23 父组件的自定义事件

若在父组件上定义一个事件,相当于定义一个监听子组件的监听器。若想要单独使用父组件的事件而不是监听,加一个.native事件修饰符即可。

2.优化

2.1.错误处理

错误处理很重要但是这是最容易让开发忽略的点。

2.1.1.请求接口错误

由于我的请求是使用axios插件或者fetch单独写在了一个js,可以对其进行响应拦截。一旦失败,或者后台报错,就进行相应的错误处理以及友好提示,也避免了重复的代码,提高可维护性

2.1.2.页面错误处理(404)
  1. nginx未匹配到路由走404路由
  2. router.beforeEach是否匹配到响应的路由,否则走错误路由。
2.1.3 错误提示封装

将错误提示模块化,通过vuex来操作错误的显示以及信息等内容。

2.2.减少不必要的依赖包

性能优化是很重要的,特别是对于vue这种首屏加载时间长的。

例如有些项目用到了图表(echarts),可以选择加载依赖包,不用加载整个echarts库。

2.3.不发送多个相同的请求

不发送多个相同的请求,在点击触发请求的同时锁定请求,直至给出响应/错误解锁。

以上内容,如有错误请指出,不甚感激。
如需转载,请注明出处

2.4.组件中引入css的css依赖 -- sass-resources-loader

为了让SCSS之类的文件在CSS中引入中不需要每次都引入var.scss文件,可以引入一个sass-resources-loader解决。

2.4.为了解决组件内引入的外部css文件没有做css兼容处理 -- postcss-loader

在build/utils中引入postcss-loader

loader: 'postcss-loader',
options:{
  plugins: (loader) => [
      require('autoprefixer')()
  ],
  sourceMap: true 
}

2.5兼容ie9-11

  • babel-polyfill模块
entry: {
    // app: './src/main.js'
    app: ["babel-polyfill", "./src/main.js"]
}
// build/webpack.base.config.js
// ./src/main.js是入口文件,可能存在差异
  • promise兼容
plugins: [
    new webpack.ProvidePlugin({
        // 如果用了fetch可以使用以下的进行兼容
        // fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise',
    })
]

2.6 vue项目配置ico

doc

3.混淆点

3.1 camelCase vs kebab-case - prop/事件

  1. prop

HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

重申一次,如果你使用字符串模板,那么这个限制就不存在了。

  1. 事件

不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的:

<my-component v-on:my-event="doSomething"></my-component>

不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或属性名,所以就没有理由使用 camelCasePascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到

因此,我们推荐你始终使用 kebab-case 的事件名。

4.vue常见面试题

doc

以上内容,如有错误请指出,不甚感激。
如需转载,请注明出处

作者:FIONA-SUN
来源链接:https://www.cnblogs.com/adelina-blog/p/8336548.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/41712.html

标签: vue
分享给朋友:

“vue踩坑总结 & 优化点” 的相关文章

从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之五 || Swagger的使用 3.3 JWT权限验证【必看】

从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之五 || Swagger的使用 3.3 JWT权限验证【必看】

本文3.0版本文章 https://mp.weixin.qq.com/s/7135y3MkUlPIp-flfwscig   下边的是我关于JWT的视频讲解,都可以看看 1、P2直播12期:授权与认证(1)_简单授权 2、P3直播13期:授权与认...

easy-table-vue+VueJs、SpringBoot+Mybatis实现MVVM模型前后台数据交互

easy-table-vue+VueJs、SpringBoot+Mybatis实现MVVM模型前后台数据交互

该项目分为前端展示部分和后台服务部分。 前端部分   使用的技术是:NodeJs、Webpack、VueJs   使用的组件库是:IVIEW、easy-table-vue   使用的开发工具是:WebStorm  链接:https://pan.b...

pycharm使用vue

pycharm使用vue

目录 pycharm配置并启动vue项目 Pycharm配置支持vue语法 pycharm打开.vue文件由于ESLint语法检查代码出现红色波浪线 方法1...

一步步使用SpringBoot结合Vue实现登录和用户管理功能

一步步使用SpringBoot结合Vue实现登录和用户管理功能

前后端分离开发是当今开发的主流。本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能。通过这个例子,可以快速入门SpringBoot+Vue前后端分离的开发。 前言 1、前后端分离简介 在这里首先简单...

SpringBoot + easyexcel + vue 下载 excel 问题

最近有个下载 excel 的需求,后端导出 excel 我选用了 easyexcel,但是 vue 前端老是下载不了,发现网上写的很多普遍的方法用着不行。查了下发现了可行的方法,这里写下总结。 1. 后端 不知为啥用 Post 请求下载不了,这里改...

vue中对html标签中的属性进行字符串拼接

先用v-bind将该属性的属性值转化为变量模式,然后即可实现拼接 //若再发现有其它方式,再进行更新 <div v-for="(item,index) in tabs" @click="tab(index)">...

vue框架中更改body,html页面背景颜色

beforeCreate () { document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy () { document.query...

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

Document 框架采用dotnetcore+vue+elementUI 前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表/主从表的增、删、改、查、导入、导出、上传、审核基础...

脚手架vue-cli和@vue/cli的搭建及区别

脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装...

Vue中自定义标签及其使用

Vue中自定义标签及其使用

Vue中自定义标签及其使用 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。