vue使用中的 填坑记录

.sync 和 update

我们经常使用 prop 和 emit 的组合来实现父子之间的通信，如果简单的场景下想父子组件相互修改，可以使用.sync 和 update组合。

 

//子组件

methods:{
   changeSyncData(){
       this.$emit("update:FnName",{name:123})
   }
},


//父组件
<sync-vue :FnName.sync="analysisData" />

：sync只是给大家伙提供了一种与父组件沟通的思路而已！所以在后面日子里，你如果只是单纯的在子组件当中修改父组件的某个数据时，建议使用sync，简单，快捷，有档次！真好！

---

在组件中使用witch的坑

1.vue 中 父组件对子组件设置v-if 属性应注意 

v-if 会影响 子组件的生命周期 导致watch 不起作用

把 v-if 换成 v-show 可解决了。

2. deep属性（深度监听，常用语对象下面属性的改变） 这样的方法对性能影响很大  改进

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

props: {
examPlan: Object
},

watch: {
      'examPlan.id': {
        handler(newName, oldName) {
          console.log("watch 触发了")
          this.getExamPlanList();
        },
        // immediate: true,
        // deep: true
        // deep性能影响很大，修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理 'examPlan.id'只监听对象下某个属性
      }
    },

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

---

后台时间太久，对前端用户非常不友好。

全局设置超时时间(单位ms)

axios.defaults.timeout = 2500;    //2.5s

单独设置超时时间(单位ms)  对于请求上传文件之类的耗时比较长的接口可以单独设置超时时间

axios.get('/longRequest', {
  timeout: 5000
});

这类后台无法立即处理的请求，可以用定时查询或者websocket，总的分为2步。1、前端发起请求，后台响应，前端界面需要有提交成功正在处理的提示。2、后台处理完毕，向前端发送消息，前端界面显示操作完成的提示。