Vue Q

1.setTimeout/ setInterval

• Scene One: this can not be changed with this access point to examples vue

  mounted(){
    setTimeout( function () {
    //setInterval同理
    console.log(this); //此时this指向Window对象
    }，1000) ;
  }

• Solution: Use the arrow or cache this function

  //箭头函数访问this实例因为箭头函数本身没有绑定this
  setTimeout(() => {
    console. log(this);},  500) ;
    //使用变量访问this实例let self=this;
  },1000);
  setTimeout (function () {
    console. log(self);//使用self变量访问this实例
  }, 1000) ;

setInterval route continues to run and jump did not destroy

• Scene One: for example, some of the barrage, a revolving door text, or the need for regular calls, routing after the jump, because the components have been destroyed, but not destroyed setlnterval, continues to call back, the console will continue to error, if the amount of computation large, can not promptly removed, it can cause serious page Caton.

• • Solution: Stop the component lifecycle beforeDestroy setInterval

  created() {
       this.intervalid = setInterval(() => {
          this.layerError = "";
          this.Timer = null;
      }, 100000);
   }
  beforeDestroy( ){
    //我通常是把setInterval( )定时器赋值给this实例，然后就可以像下面这么暂停。
    clearInterval(this.intervalid);
  }

2.Vue route to intercept the browser back to save drafts to achieve similar needs

• Scene One: In order to prevent users from sudden departure, did not save the information you entered.

• • Solution :

  //在路由组件中:mounted(){}，
  beforeRouteLeave (to, from, next) {
      if(用户已经输入信息){
        //出现弹窗提醒保存草稿，或者自动后台为其保存
      }else{
        next(true);//用户离开
      }
  }

3. Add custom components such as click event does not take effect

• Scene One: Some custom components, you need to add some extra events to implement some of the specific needs

  <template>
    <el-progress type="circle" :percentage=“0" @click="stopProgress">   </elprogress>
  </template>
  <script>
    export default {
       methods:{
            stopProgress() { 
            console.log('停止')
            }
        }
    }
  </script>

• Workaround: Use .native modifier

  <template>
    <el-progress type="circle" :percentage="0" @click.native="stopProgress"></el-progress>
  </template>
  <script>
    export default {
        methods:{
            stopProgress() { 
            console.log('停止')
            }
        }
    }
  </script>

4. The manual manipulation custom component

• Scene One: custom components, the components need to acquire some other object operations Dom

• • Workaround: Use the property ref exposure get a handle assembly

  <template>
    <el-progress type="circle" :percentage="O" ref="progress"></el-progress></template>
  <script>
    this.$refs.progress //组件对象实例， 可以手动调用组件的内置方法和属性
    this.$refs.progress.$el //组件 对象的最外层dom元素
  </script>

The effect of depth selector

• Scene One: scoped style, hoping to influence the sub-components of the default styles

After setting the style scoped parsed browser below this, a is a div, a div which contains a component which parses finished div style name is b, like the parent components affecting the default style subassembly. Solution:

  <style scoped>
    .a >>> .b { /* ... */ }
  </style>
    //有些像Sass之类的预处理器无法正确解析>>>。这种情况下你可以使用/deep/操作符取而代之- - - -这是一个>>>的别名，同样可以正常工作。  <style scoped lang=“scss”>
    .a /deep/ .b { /* ... */ }
  </style>

6.Vue array / object view does not update update

• Scene One: Many times we are accustomed to operating such arrays and objects

  data() { 
    return {
        arr: [1,2,3],
        obj:{
          a: 1,
          b: 2 
        }
    }; 
  },
 // 数组更新视图不更新
 this.arr[0] = 'OBKoro1';
 this.arr.length = 1;
 console.log(arr);// ['OBKoro1']; 
 // 数据更新，对象视图不更新     
 this.obj.c = 'OBKoro1';
 delete this.obj.a; //删除对象的属性
 console.log(obj);  // {b:2,c:'OBKoro1'}

• Solution:

• • this. $ set (you want to change the array / object you want to change the location / key, you have to change what value)
  • Native method array trigger a view update (vue official website can be found):
  • Replace the entire array / object

Use 7.Vue Filters Filter

• Common data format text: a scene

  <!– 在双花括号中 –>
 <div>{{ message | DateFormat }}</div>    //展示正确时间
 <!– 在'v-bind'中 –>
 <div v-bind:id='rawId | formatId'></div>
 //Demo:一个日期过滤器返回yyyy- MM-ddhh:mm:ss的样式
 //引入一个提前写好日期格式化的js  import dayjs from ‘dayjs’;
 export default {
    data() {
       return {
               //时间毫秒
               message:18324798324789
           }
   },
   filters: {
         //传入进行日期格式化
     DateFormat(value) {
       return dayjs(value).format(“YYYY-MM-DD HH:mm:ss")
         }
   }
 }

8.Vue depth watch and watch immediately trigger a callback

• A scene: the value corresponding to watch inside the object which is not monitored, the following method can be used.

• • Options: deep
  • In the options parameter specifies the deep: true, you can monitor changes in the object properties of the neutron.
  • Options: immediate
  • Specifies the immediate in the option parameter: true, the current value of the expression will immediately trigger a callback, which is the default trigger once.

  watch: {
   obj: {
       handler(val, oldVal) {
         console.log('属性变化触发这个回调;',val, oldVal);
       },
       deep: true // 监测这个对象中每一个属性的变化
   },
   step: { // 属性 //watch
      handler(val, oldVal) {
       console.log('默认触发一次', val, oldVal);
      },
      immediate: true // 默认触发一次
   }
 }</cod  e> 

Reference link: https: //www.vue-js.com/topic/5be446a7fffaa30f33091cf1