Vue小技巧，我“废“了

1、如何监听生命周期函数

Vue项目中，我们通常这样去使用如beforeDestroy之类的生命周期函数：

export default {   data(){     return{       timer:null     }   },   mounted() {    //创建定时器     this.timer = setInterval(()=>{         //...     })    },   updated() {     //...   },    beforeDestroy() {     // 销毁定时器      clearInterval(this.timer);      this.timer=null;   },   methods: {      //...   } }

缺点：但是，如果创建与销毁定时器之间隔得太远，我们可能会忘记销毁定时器。 

（1）内部监听生命周期函数

Vue组件中，$on,$once都可以去监听所有的生命周期钩子函数。

export default {   data(){     return{       timer:null     }   },   mounted() {     let $this=this;     //创建定时器     $this.timer = setInterval(()=>{         //...     })      //监听生命周期函数---beforeDestory      $this.$once('hook:beforeDestory',()=>{  //只触发一次，在第一次触发之后移除监听器         clearInterval($this.timer);         $this.timer = null;      })       } } 

（2）外部监听生命周期函数

如何监听子组件的生命周期钩子？

<template>   <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->   <Header @hook:updated="_handleUpdated" /> </template> <script> import Header from '../components/Header' export default {   components: {     Header   },   methods: {     _handleUpdated() {       console.log('Header组件的updated钩子函数被触发');     }   } } </script>

2、Vue.observable手写状态管理

首先定义store

import Vue from 'vue' // 通过Vue.observable创建一个可响应的对象 export const store = Vue.observable({   userInfo: {} }) // 定义 mutations, 修改属性 export const mutations = {   setUserInfo(userInfo) {     store.userInfo = userInfo   } }

在组建中使用

<template>   <div>     {{ userInfo.name }}   </div> </template> <script> import { store, mutations } from '../store' export default {   computed: {     userInfo() {       return store.userInfo     }   },   created() {     mutations.setUserInfo({       name: 'LiHua'     })   } } </script>

3、watch知多少

（1）基础用法

 watch: {   searchValue(newValue, oldValue) {       if (newValue !== oldValue) {         this._loadData()       }     }   },   methods: {     _loadData() {       // 重新加载数据，此处需要通过函数防抖     }   }

（2）立即触发

页面初始化时，watch不会被触发，我们可能会直接在挂载前后进行初始调用，但是只需配置立即执行属性就可以得到相同效果。

 watch: {      searchValue: {     // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined       handler(newValue, oldValue) {         if (newValue !== oldValue) {           this._loadData()         }       },       // 配置立即执行属性       immediate: true     }   }

（3）深度监听

在填写表单数据时，通常需要通过用户是否已填写来改变提交按钮的状态，此时我们只需配置深度监听属性，就会监听表单数据对象里面每一个值的变化。

  watch: {      formData: {       // 需要注意，因为对象引用的原因， newValue和oldValue的值一直相等       handler(newValue, oldValue) {         // 在改变提交按钮状态       },        deep: true     }   }

（4）watch 注销

页面切换时，我们应该注销掉原来页面的watch，不然可能导致内置溢出。

const unWatch = this.$watch('formData', () => {      console.log('数据发生了变化') },      {         deep: true      }  ) unWatch();//手动调用unWatch进行注销

采用此方法，可实现随时监听，随时取消。