vue项目开发问题点记录

vue监听路由变化

// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},
或


// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},
或


// 监听,当路由发生变化的时候执行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

elementUI中遇到 [Vue warn]: Invalid prop: custom validator check failed for prop "status"

<el-progress  :percentage="stepPercentage(item.step)" :status="item.step == 4 ? 'success' :null"></el-progress>
如果一定要根据条件判断，需要赋予默认颜色的话，可以赋值null【null，不能有引号】

hash字符串参数处理

在JavaScript中，你可以使用URLSearchParams API来处理URL参数。这个API提供了一种简单的方式来解析URL查询参数并与之交互。以下是一个示例：

// 创建一个URLSearchParams对象并传入包含URL的字符串
const urlParams = new URLSearchParams("key1=value1&key2=value2&key3=value3");

// 使用get()方法获取特定参数的值
console.log(urlParams.get('key1')); // 输出: "value1"

// 使用set()方法设置参数的值
urlParams.set('key4', 'value4');

// 使用toString()方法将URLSearchParams对象转换回URL参数字符串
const newUrlString = urlParams.toString();
console.log(newUrlString); // 输出: "key1=value1&key2=value2&key3=value3&key4=value4"

// 使用entries()方法遍历所有参数
for (const pair of urlParams.entries()) {
    console.log(pair[0], pair[1]);
}

通过使用URLSearchParams API，你可以方便地处理URL参数，包括获取特定参数的值、设置参数的值、将URLSearchParams对象转换回URL参数字符串，以及遍历所有参数。这个API提供了一种现成的方式来处理URL参数，避免了手动解析URL字符串的复杂性。

代码思考

函数是一等公民。一切都回归基础知识。

const processJump = (jumpType, columnCheck) => {
  return this.curWidget.jump.some((item, index) => {
    if (item.type !== jumpType) {
      return false;
    }
    return item?.form.fieldList.some($item => {
      const _condition = columnCheck($item);
      if (_condition) {
        this.jumpList = [this.curWidget.jump[index]];
      }
      return _condition;
    });
  });
};

const checkMeasurementColumn = ($item) => $item.id === data.measurementColumn || $item.id === dimensionColumn;
const checkParamColumn = ($item) => $item.column === data.measurementColumn || $item.id === dimensionColumn;

if (processJump('analysis', checkMeasurementColumn)) {
  clickList.push('jumpFun');
}

if (processJump('URL', checkParamColumn)) {
  clickList.push('jumpFun');
}

js事件冒泡和捕获

通过addEventListener为元素新增事监听事件，可以通过第三个布尔值参数来控制事件在冒泡时触发还是在捕获时触发，默认为false：冒泡时触发。

参考文章