vue

1，就是A.vue中import 了B.vue，然后，我现在删了B.vue,在A.vue中也删除了import B的语句，然后它npm run dev还是报错，说A里面找不到B。
原因：是因为删除掉之后没有保存。

2，如何监听watch一个属性的变更：

watch:{
message:{
handler(val,old){
console.log("message:"+this.message)
this.getCollapseData()
},
immediate:true,
deep:true
}
},

 

3，json录制和回放的数据的不同之处：只要后端返回的字符串是格式化之后的json字符串，那前端展示的就是标准的json格式

<template>
  <section>
    <div>
      左边是录制的流量，右边是回放的流量：
      <code-diff
        :old-string="oldStr"
        :new-string="newStr"
        outputFormat="side-by-side"
        :context="10"
      >
      </code-diff>
    </div>
  </section>
</template>
<script>
import CodeDiff from "vue-code-diff";
import axios from "axios";
export default {
  components: { CodeDiff },
  props:{
      trafficId:Number
  },
  data() {
    return {
      oldStr: "",
      newStr: "",
    };
  },
  created() {
    this.getCompareStrs();
  },
  methods: {
    getCompareStrs(){             
            axios
                .get(
                window.LOCAL_CONFIG.API_HOME+"traffic/compareTraffics",
                {
                    params: {
                        trafficId: this.trafficId
                }  
                },
                {
                    headers: {
                        "Content-Type": "application/json"
                }
                }
                ).then(response => {
                    // this.oldStr = eval('(' + response.data.recordedValue + ')');
                    // this.newStr = eval('(' + response.data.replayedValue + ')');
                    // this.oldStr = JSON.stringify(response.data.recordedValue);
                    // this.newStr = JSON.stringify(response.data.replayedValue);
                    this.oldStr = response.data.recordedValue;
                    this.newStr = response.data.replayedValue;
                    console.log("oldStr:"+this.oldStr);
                    console.log("oldStr:"+this.newStr);
                    
                });
        }
  }
};
</script>
<style scoped>
</style>

 4，获取对象数组中的某一个属性集合：

       data.map(item => item.a)

5，获取子组件的某一个属性：

     <子组件名字 ref="子组件名字" ></子组件名字>

     this.$refs.子组件名字.collapseData