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、后台处理完毕,向前端发送消息,前端界面显示操作完成的提示。
 
posted @ 2021-11-01 15:14  青幽草  阅读(101)  评论(0编辑  收藏  举报