vue 2 , css, js, webpack进阶/优化相关技巧使用久了vue2，就会发现vue2在实际开发中的一些高

使用久了vue2，就会发现vue2在实际开发中的一些高级一点的技巧，大家快来学习学习！

1. filters：过滤器，主要用于数据格式化

filters是和data同级的一个属性，下面是示例：

filters： {
   replaceStr(value) {      
        return value.replace(/\n/g, "<br><br>");    
    },
}

在vue 组件中这样使用：

<div v-if="article.Content" 
    v-html="$options.filters.replaceStr(article.Content)">
</div>

2. $options： vue的实例属性，可以获得除data外的一些属性

例子像上面所示

3. provide + injected：多层级、或跨层级数据传递

父组件：

<template>
  <div>
   
    <child></child>
  </div>
</template>
<script>
import child from './child'
export default {
 components: { child },  
 provide(){
    return {
        example: this.example
    }
  },
  data() {
    return {
        example: '111'
    }  
  }
}

子组件:

//子/孙级组件，接收example
<template>
  <div>{{ example }}</div>
</template>

<script>
export default {
  name: "child",
  inject: ["example"],  
  mounted() {
    console.log(this.example)  
  },
};
</script>

好处：极大的减少了代码量与工作量，避免了每一层都要通过props接收然后再放在子组件的做法；

4. component is='' : 多个组件切换

<component :is='myComponent'> </component>

//  先引入组件
import A from './A.vue'
import B from './B.vue'export  default {
  data() {
        return {
            myComponent: A
        }
    },
    methods: {
        change() {
            this.myComponent = B         }
    }
}

5. component key: 使用同一个组件导致数据互相覆盖,数据不正确

解决方案:

1. 使用 key
<my-comp :key="index"> </my-comp>

2. 使用 监听 route变化
watch: {
    '$route': function(val, old) {
        if (val !== old) {
            // 使用数据重置
        }
    }
}

6. /deep/ : 更改ui插件的样式

因为使用elementUI, iview, antd, vant等UI样式, UI样式class最终编译出来会带有动态的hash, 所以要想覆盖原有的ui样式, 就可以通过/deep/

/deep/ .ant-layout-content {
    font-size: 15px;
}

7. webpack merge: 可以将公共的webpack配置提取出一个文件, 然后分别的dev, pre, prod等配置环境中使用 merge合并

const commConfig = require("./config/webpack.comm");
const developmentConfig = requie("./config/webpack.development");
const productionConfig = require("./config/webpack.production");
const merge = require("webpack-merge");

module.exports = mode => {
    if(mode === "production"){
        return merge(commConfig,productionConfig,{mode});   
    }
    return merge(commConfig,developmentConfig,{mode});
}

8. position: sticky: 使元素在滚动到指定距离的时候, 一直悬浮在那个位置

注意: 必须搭配上top, left, bottom, right中的其中一个使用, 才会有效果

例如, 我要使某个元素在滚动到顶部的时候置顶, 之前一直都是使用js监听滚动事件, 再计算当前元素与顶部的距离, 这方案太麻烦了; 现在css只需要两行就行:

position: sticky;
top: 0;

要使超宽元素在往左滚动的时候, 左边第一列要固定位置, 这时候就可以:

position: sticky;
left: 0;

其父元素要使用:

    overflow: scroll;

vue 2 , css, js, webpack进阶/优化相关技巧