vue使用问题整理

记录工作总结

vue的v-if和v-show 使用时机

首先说 v-if 初始的时候初始值为false的组件不会渲染,也不会触发任何一个生命周期钩子函数, 由此可见v-if 的渲染是有惰性的初始值为true的组件会进行渲染,钩子函数的执行顺序为 beforeCreate(),created(),beforeMount(),mounted() 钩子函数

切换的时候上一次渲染的组件销毁符合条件的组件渲染会依次执行 **beforeCreate(),created(),beforeMount(),beforeDestroy(),destroyed() mounted()**钩子函数其中标黄的是上一个被销毁组件的两个钩子函数 (销毁前,销毁后)剩下的四个钩子函数是本次符合条件的组件的钩子函数

再说说 v-show

初始的时候 v-show的渲染无论条件满不满足每个组件都会依次按顺序执行 beforeCreate(),created(),beforeMount(),mounted() 这四个钩子函数,有几个组件就会执行几次

切换的时候切换时组件始终保持在 mounted()挂载完成钩子函数

computed 和 watch

www.cnblogs.com/jiajialove/…

计算属性computed:

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；

监听的对象也可以写成字符串的形式

属性方法透传

多层嵌套组件属性透传 v-bind=' $attrs'和事件透传 v-on='$ listeners'

vue样式穿透

嵌套组件后，想要修改组件样式，如何做到不用在组件内修改，就使用样式透传

stylus的样式穿透使用>>> 外层 >>> 第三方组件样式

.wrapper >>> .swiper-pagination-bullet-active background: #fff

sass和less的样式穿透使用/deep/

外层 /deep/ 第三方组件 { 样式 } .wrapper /deep/ .swiper-pagination-bullet-active{ background: #fff; }

.el-table /deep/ .cell {
    display: flex !important;
    justify-content: center;
    padding-right: 10px !important;
}

.el-table >>> .cell {
    display: flex !important;
    justify-content: center;
    padding-right: 10px !important;
}

video src更新

问题：video标签里 source标签切换url，视频未替换

当 video 中存在 source 标签的时候，浏览器渲染之后会自动去获取地址，以后即便src地址改变，浏览器也不会再去获取地址。如果只有一个 source 的情况下你可以把地址放在 video 上通过修改 video src 的值再触发("#video").play(); 如果有多个 source 的情况下可以动态插入 source 标签的方式，触发浏览器进行重排，从而去获取相应地址的文件进行播放。

2021年6月，技术栈由react彻底的转变为vue，记录过程中的小磕磕绊绊

vue+elementUI表格后台数据为数字，前台转化成对应的中文

后端返回值为数字，但是前端需要映射成中文

在js文件data中定义 status = {"0":冻结,"1":"开通"}
在vue文件中
<el-table-column label="状态">
        <template slot-scope="scope">  
          {{ status[(scope.row.status)] }}
        </template>
      </el-table-column>

el-select回显问题：如何使下拉框展示label的值

想要的效果：

实际上：

根本原因： 数据类型不匹配导致，就是el-select option的value 和 el-select model绑定的字段的数据类型不一致，一个是number类型一个是string类型。比如'1' !== 1,导致匹配不上，所以展示不了label的值

解决方法：

动态增减表单及表单验证

效果

动态增减关键代码

校验关键代码 这里需要注意的是：

①:prop的写法。一定是遍历的数组 'list.' 加上（item，index）中的index，再加上'.value'。原因是，表单验证时它需要去找到具体的某一个表单项，一旦prop写错，是无法达到验证效果的。

②给formData.list赋值[]时，不要直接formData.list = []（我用的是vue 2.x版本），这样赋值校验效果就会失效，(应该是因为vue2版本，无法监听对象属性的变化)，需要this.$set(this.formData,list,[])

el-form自定义校验规则

 rules: {
        newPassword: [{ required: true, message: '请输入新密码', trigger: ['change', 'blur'] }, { validator: this.passwordValidator, trigger: ['change', 'blur'] }],
      }
      
    passwordValidator(rule, value, callback) {
      const re = /(?!^\d+$)(?!^[A-Za-z]+$)(?!^[^A-Za-z0-9]+$)(?!^.*[\u4E00-\u9FA5].*$)^\S{6,64}$/; //数字、字母、字符任意两两组合或者三者组合
      if (!re.test(value)) {
        return callback(new Error('请输入数字/字母/字符组合大于6位数的密码')); // error为错误提示信息
      }
      callback(); // 一定要有
    },

elementui面包屑的封装

核心点 $route.matched

<template>
  <el-breadcrumb class="breadcrumb">
    <el-breadcrumb-item
      v-for="(item, index) in breadList"
      :key="item.name"
      :to="index !== breadList.length - 1 ? item.path: null"
    >
      <span>{{ item.meta.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script>
export default {
  name: 'Breadcrumb',
  data() {
    return {
      name: '',
      breadList: []
    };
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      this.breadList = [];
      this.$route.matched.forEach(item => {
        if (item && item.meta && item.meta.title) {
          if (!this.breadTitleList.includes(item.meta.title)) {
            this.breadList.push(item);
          }
        }
      });
    }
  },
  computed: {
    breadTitleList() {
      return this.breadList.map(item => item.meta && item.meta.title).filter(item => !!item);
    }
  },
  watch: {
    $route(newVal) {
      this.breadList = [];
      newVal.matched.forEach(item => {
        if (item && item.meta && item.meta.title) {
          if (!this.breadTitleList.includes(item.meta.title)) {
            this.breadList.push(item);
          }
        }
      });
    }
  }
};

router数组 举例：  是hash路由
[
      {
        path: '/list',
        component: RouterViewComponent,
        meta: { title: '列表' },
        children: [
          {
            path: 'edit',
            name: 'edit',
            component: EditComponent,
            meta: { title: '编辑', }
          },
          {
            path: 'setting',
            name: 'setting',
            component: SettingComponent,
            meta: { title: '设置' }
          }
        ]
      }
    ];
    
    当页面xxx.html#/edit 面包屑为   列表 / 编辑
    当页面xxx.html#/edit 面包屑为   列表 / 设置

elementui table 错位问题

有时elementui table，加载完数据，或者动态切换表单时，会出现表格错位的情况解决方法

请求成功后

  this.$nextTick(() => {
            this.$refs.tableRefName.doLayout();
   });