二、小项目不使用vuex,使用vue.observable来进行状态管理。
三、深度watch与watch立即触发回调，我可以监听你的一举一动
（1）内部监听组件的生命周期函数，列如在组件中使用echarts,一般情况都是如下方式
<template> <div id=‘echarts‘></div> </template> <script> export default { data:function(){}, mounted(){ this.chart=echart.init(this.$el); window.addEventListener(‘resize‘,this.$_handleResizeChart) }, updated(){ // 执行了一系列代码 }, create(){ // 执行了一系列代码 }, beforeDestroy(){ // 组件销毁的时候，销毁监听事件 window.removeEventListener(‘resize‘,this.$_handleResizeChart) }, methods:{ $_handleResizeChart(){ this.chart.resize() } } } </script>
这样写是没有问题的，但是添加事件和销毁事件之间隔了很多行的代码，往往会忘记销毁事件，我们可以使用hook来将事件监听和事件销毁放在一起，这样有利于可读性，也防止了忘记销毁事件
export default { mounted() { this.chart = echarts.init(this.$el) // 请求数据，赋值数据 等等一系列操作... // 监听窗口发生变化，resize组件 window.addEventListener(‘resize‘, this.$_handleResizeChart) // 通过hook监听组件销毁钩子函数，并取消监听事件 this.$once(‘hook:beforeDestroy‘, () => { window.removeEventListener(‘resize‘, this.$_handleResizeChart) }) }, updated() {}, created() {}, methods: { $_handleResizeChart() { // this.chart.resize() } } }
可以使用$on,$once来监听组件的生命周期钩子，如监听组件的updated钩子函数可以写成 this.$on(‘hook:updated‘, () => {})
（2）外部监听组件的生命周期函数
如果是使用第三方的组件，我们需要监听这个第三方组件的生命周期钩子函数，可以使用@hook来监听第三方组件的生命周期钩子函数，如下：
<template> <!--通过@hook:updated监听组件的updated生命钩子函数--> <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发--> <custom-select @hook:updated="$_handleSelectUpdated" /> </template> <script> import CustomSelect from ‘../components/custom-select‘ export default { components: { CustomSelect }, methods: { $_handleSelectUpdated() { console.log(‘custom-select组件的updated钩子函数被触发‘) } } } </script>
二、小项目不使用vuex,使用vue.observable来进行状态管理。
vuex通常是用于大型的vue项目进行状态管理的，如果是小型的项目，可以使用Vue.observable来创建一个状态管理。
Vue.observable是2.6提供的新API.它可以让一个对象可响应，Vue内部使用它来处理data函数返回的数据。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器
（1）创建store
import Vue from ‘vue‘ // 通过Vue.observable创建一个可响应的对象 export const store = Vue.observable({ userInfo: {}, roleIds: [] }) // 定义 mutations, 修改属性 export const mutations = { setUserInfo(userInfo) { store.userInfo = userInfo }, setRoleIds(roleIds) { store.roleIds = roleIds } }
（2）在组件中使用
<template> <div> {{ userInfo.name }} </div> </template> <script> import { store, mutations } from ‘../store‘ export default { computed: { userInfo() { return store.userInfo } }, created() { mutations.setUserInfo({ name: ‘子君‘ }) } } </script>
三、深度watch与watch立即触发回调，我可以监听你的一举一动
在开发vue项目的时候，我们通常使用watch来监听数据的改变，然后在变化的时候做一系列的操作。
（1）基础用法：比如一个列表页，我们希望在搜索关键字的时候就可以触发搜索，此时除了监听搜索框的change 事件外，还可以通过watch 监听搜索关键字的变化。
<template> <!--此处示例使用了element-ui--> <div> <div> <span>搜索</span> <input v-model="searchValue" /> </div> <!--列表，代码省略--> </div> </template> <script> export default { data() { return { searchValue: ‘‘ } }, watch: { // 在值发生变化之后，重新加载数据 searchValue(newValue, oldValue) { // 判断搜索 if (newValue !== oldValue) { this.$_loadData() } } }, methods: { $_loadData() { // 重新加载数据，此处需要通过函数防抖 } } } </script>
（2）立即触发
如果我们想要在页面初始化的时候加载数据，我们还可以在created 或者mounted 生命周期钩子函数里面再次调用$_loadDate方法，不过，我们也可以通过配置 watch 的立即触发属性，就可以满足了
// 改造watch export default { watch: { // 在值发生变化之后，重新加载数据 searchValue: { // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined handler(newValue, oldValue) { if (newValue !== oldValue) { this.$_loadData() } }, // 配置立即执行属性 immediate: true } } }
（3）深度监听
一个表单页面，需求希望用户在修改表单的任意一项之后，表单页面就需要变更为被修改状态。如果按照上例中watch的写法，那么我们就需要去监听表单每一个属性，太麻烦了，这时候就需要用到watch的深度监听deep
export default { data() { return { formData: { name: ‘‘, sex: ‘‘, age: 0, deptId: ‘‘ } } }, watch: { // 在值发生变化之后，重新加载数据 formData: { // 需要注意，因为对象引用的原因， newValue和oldValue的值一直相等 handler(newValue, oldValue) { // 在这里标记页面编辑状态 }, // 通过指定deep属性为true, watch会监听对象里面每一个值的变化 deep: true } } }
（4）随时监听，随时取消
watch去监听表单数据(假设是formData),如上例所述，但对于编辑表单来说，表单需要回填数据，这时候会修改formData的值，会触发watch,无法准确的判断是否启用保存按钮。现在你就需要了解一下$watchexport default { data() { return { formData: { name: ‘‘, age: 0 } } }, created() { this.$_loadData() }, methods: { // 模拟异步请求数据 $_loadData() { setTimeout(() => { // 先赋值 this.formData = { name: ‘子君‘, age: 18 } // 等表单数据回填之后，监听数据是否发生变化 const unwatch = this.$watch( ‘formData‘, () => { console.log(‘数据发生了变化‘) }, { deep: true } ) // 模拟数据发生了变化 setTimeout(() => { this.formData.name = ‘张三‘ }, 1000) }, 1000) } } }
根据上例可以看到，我们可以在需要的时候通过this.$watch来监听数据变化。那么如何取消监听呢，上例中this.$watch返回了一个值unwatch,是一个函数，在需要取消的时候，执行 unwatch()即可取消
作者：前端进击者
链接：https://juejin.cn/post/6844904196626448391
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
原文：https://www.cnblogs.com/zhilili/p/14742019.html