vue那些一般人不知道的技巧

1. @hook的使用

1.1 关于自身组件定时器的清除

在使用定时器setInterval的时候，有过因为定时器掉坑的同学，都会下意识的在卸载组件进行定时器的清除。
即：

<template>
  <div>1</div>
</template>
<script>
export default {
  name: "About",
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log("now:", Date.now());
    }, 1000);
  },
  destroyed() {
    console.log("destroyed", this.timer);
    clearInterval(this.timer);
    console.log("destroyed clear after", this.timer);
  }
};
</script> 

这确实是正确定流程，标准的写法。
但是想要秀操作的同学们可以采取下述写法：

<template>
  <div>1</div>
</template>
<script>
export default {
  name: "About",
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log("now:", Date.now());
    }, 1000);
    this.$once("hook:beforeDestroy", () => clearInterval(this.timer));
  }
};
</script> 

1.2 关于子组件生命周期的监听

大多同学会在子组件对应的生命周期内抛发父组件内定义的特定方法进行回调，这没问题也很正确。
但是需要侵入子组件在生命周期内进行抛发操作，那有没有更好的方法呢？

of course !
代码如下：

<template>
  <div>
    <Child
      v-if="show"
      :num="num"
      @hook:mounted = "child__mounted = true ,child_destroyed =false "
      @hook:updated = "child_updated = true"
      @hook:destroyed = "child_destroyed = true,child__mounted = false "
    />
    child__mounted: {{child__mounted}}
    <br />
    child_updated: {{child_updated}}
    <br />
    child_destroyed: {{child_destroyed}}
    <br />
    <button @click="show = !show">toggle</button>
    <button @click="++num">++num</button>
    {{num}}
  </div>
</template>
<script>
import Child from "./Child";
export default {
  components: {
    Child
  },
  data() {
    return {
      num: 100,
      show: false,
      child__mounted: false,
      child_updated: false,
      child_destroyed: true
    };
  }
};
</script> 

使用@hook即可监听子组件对应生命周期，执行一些回调操作

2. $props妙用

假设父组件传递给子组件三个数据<Child :author="'lee'" :age="18" :gender="1" />，子组件肯定要先接收，然后在template里一个个使用
child.vue

<template>
  <div class="root_container">{{author}} -- {{gender}}</div>
</template>
<script>
export default {
  name: "Child",
  props: ["author", "gender"]
};
</script> 

这还是父组件传递过来两三个，假如父组件传递过来十几个？二十几个？也要这么一个个在template写么？

一个个写也不是不可以，但是可以有更优雅的写法，如下：

<template>
  <div class="root_container">{{$props}}</div>
</template>
<script>
export default {
  name: "Child",
  props: ["author", "gender"]
};
</script> 

$props只会展示在props里进行接收的数据！

3. vue实现路由自动添加

项目路由对应的文件很多时，那么路由注册表文件肯定很多冗余代码。

那么有没有办法，能够在创建页面的时候自动将其配置到路由表里呢？

参考地址：vue实现路由自动添加

4. props 添加校验

简单的使用方式：

props: ['a', 'b']

但是要注意的是，校验 props 是能够让你的 Vue 程序变得更加易维护。

比如子组件对props进行校验，规则如下：

props: {
	age: {
		type: Number, // 数据类型Number
		required: true, // 必须要传递
		validator: value => value > 10 // 自定义校验规则，传入的值必须大于10
	} 
}

接下来分别看一下不传递age、传递字符串类型的age、传递小于10的number类型的age分别会出现什么情况

• 不传递age:
  <Child :author="'lee'" :gender="'men'" />
  **缺少prop：“age” **
  
• 传递字符串类型的age
  <Child :author="'lee'" :gender="'men'" :age="'10'" />
  ** “age”的类型检查失败。期望值为10的数字，得到值为“10”的字符串。 **
  
• 传递小于10的number类型的age
  <Child :author="'lee'" :gender="'men'" :age="9" />
  属性“age”的自定义验证器检查失败。(即代表没有通过自定义校验规则)
  
• 传递大于10的number类型的age
  没有任务错误提示！