vue遇到的一些问题

Posted 2020-09-30 橙子的代码世界

vue的使用涉及的一些技术栈

CLI：Vue-CLI

UI：Element

html:Pug（Jade）

CSS：Less

javascript：ES6

ES6 import引用问题

在ES6中，模块系统的导入与导出采用的是引用导出与导入（非简单的数据类型），也就是说，如果在一个模块中华定义了一个对象并导出，在其他模块的导入使用时，导入的其实一个变量引用（指针），如果修改了对象中的属性，并影响其他模块的使用；

通常情况下，系统体量不大时，我们可以使用JSON.pase (JSON.stringify(str))简单粗暴的来生成一个全新的深度拷贝的数据对象。不过当组件较多，数据对象复用程度较高时，很明显会产生性能的问题，这是我们可以考虑使用Immutable.js

鉴于这个原因，进行复杂数据类型的导出时，需要注意多个组件导入同一数据对象时修改数据后可能产生的问题

此外，模块定义变量或函数时即使使用let 而不是const，再导入使用时都会变成只读，不能重复 赋值，效果等同于const声明

在vue中使用pug与less

安装依赖

Vue中使用vue-loader根据lang属性自动判断所需要的loader，所以不用额外配置Loader，但是需要手动安装相关依赖：

npm：pug -D

npm：less-loader - D

还是相当方便的，不用手动修改webpack的配置文件添加loader就可以使用了

定义全局函数或者变量

在vue中，每一个单文件组件都有一个独立的上下文（this）。通常在异常处理中，需要在视图上有所体现，这个时候我们就需要访问this对象，但是全局函数的上下文通常是window，这时候需要一些特殊的处理了

简单粗暴型

最简单的方法就是直接在window对象对象上定义一个全局方法，在组件内使用的时候用bind call 或apply来改变上下文

定义一个全局异常处理方法：

errHandler.js

window.errHandler = function(){

if（err.code&&err.code!==200）{

 this.$store.commit（‘err‘,true）

}esle{

//.....

}

}

在入口文件中导入

//src/main.js

import‘errHandler.js

在组件中只用

// xxx.vue
export defalut{
created(){
this.errHandler = window.errHandler.bind(this)
},
method:{
getXXX(){
this.$http.get(‘xxx/xx‘.then(({body.result})=>{
if(result code ===200){
// ...
}else{
this.errHandler(result)
}
}).catch(this.errHandler))
}
}
}

优雅安全型

在大型多人协作的项目中，污染window对象还是不太妥当的。特别是一些比较个人特色的全局方法（可能在你写的组件中几乎处处用到，但是对于其他人来说可能并不需要）。这时候推荐写一个模块，更优雅安全，也比较自然，唯一不足之处就是每个需要该函数或者方法的组件都需要使用该函数或者方法的组件都需要进行导入

自定义路径别名

可能有些人注意到了，在vue-cli生成的模块中在导入组件中使用了这样的语法：

import index form ‘@/components/index’

这个@是什么东西？后来该配置文件的时候发现这个是webpack的配置选项之一：

我们可以在基础配置文件中添加自己的路径别名，比如下面这个就把~设置为路径src/components的别名

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

}
}

然后我们导入组件的时候就可以这样写

import YourComponent from ‘YourComponent‘
import YourComponent from ‘./YourComponent‘
import YourComponent from ‘../YourComponent‘
import YourComponent from ‘/src/components/YourComponent‘

解决路径过长的麻烦

CSS作用域与模块

组件内样式

通常，组件中标签里的样式是全局的，在使用第三方UI（如;Element）时，全局样式很可能影响UI库的样式。我们可以通过添加scoped属性来使style中的样式制作用与当前组件：

<style lang="less" scoped>
@import ‘other.less‘;
.title{
font-size: 1.2rem;
}
</style>

在有scoped属性的style标签内导入其他样式，同样会受限与作用域，变为组件内样式。

在组件样式中应避免使用元素选择器，原因在于元素选择器与属性选择器时，性能会大大降低

两种组合选择器的测试  classes selector，    elements  selector