watch、Bus、nextTick、数据流

今天工作有些累，晚上还要加班，今晚不敲代码了，继续总结知识点

watch可以监听哪些数据

• watch都是用来监听数据的，一旦数据变化，就立即触发watch监听对象的内容
• 监听data中的数据
• 监听$emit事件
• 监听computed的变量
• 监听$route地址栏上的数据

对于监听data中的对象时，有两个属性，deep和immediate

data(){
	return {
		obj: { a: 10 }
	}
},
watch: {
	obj: {
		deep: true // 深度监听对象数据变化
		immediate： true  // 页面加载时开始监听属性
		handler(newVal,oldVal){
			// ...
		}
	},
	'obj.a': {
		handler(newVal,oldVal){
			// ...
		}
	},
	'obj.a': 'listener' // 监听触发后立马执行listener方法
	mounted(){
	   this.obj.a = 100
	}
}
methods: {
	listener: {
		console.log('监听到了')
	}
}

监听computed计算数据的方法和监听data的方法一样

兄弟间传参

当你有不止一个组件需要同一个请求的结果时，不要同时多次进行相同请求，不然有些数据出不来，status会显示cancled，这时候，就需要组件之间的传参数，需要用到第三方事件

这是第三方事件的文件，要在里面引入并导出vue实例

// Bus.js
import Vue from 'vue'
export default new Vue()

有两个组件demo1，demo2
数据在demo1中，那么就要在demo1中发射参数，通过点击事件触发
自然是methods中发射参数

// demo1
<template>
  <div>
    <button @click="sendMsg">点击发送信息</button>
  </div>
</template>

<script>
import Bus from '../../src/assets/bus'
export default {
  name: 'demo1',
  data(){
    return {
      obj: {a:100} // 数据
    }
  },
  methods: {
    sendMsg(){
      setTimeout(()=>{
        Bus.$emit('justKing',this.obj)
      },1000)
    },
  }
}
</script>

在demo2中，需要数据，要接受demo1传来的数据
在demo2中，需要在mounted中接受数据

// demo2
<template>
  <div>
    <p>myObj.a: {{myObj.a}}</p>
  </div>
</template>

<script>
import Bus from '../../src/assets/bus'
export default {
  name: 'demo2',
  data(){
    return {
      myObj: null
    }
  },
  methods: {
  },
  mounted(){
    Bus.$on('justKing',justKing=>{
      console.log(justKing,'justKing') 
      this.myObj = justKing
    })
  }
}
</script>

nextTick()

首先要了解，dom加载方式都是异步加载的
比如你有一个元素具有v-if属性，点击事件让元素回流并且获取元素的尺寸，此时肯定获取不到并且会报错，因为元素回流的时候，还没有在dom中加载出来，此时没有属性，当然会报错，但如果你把获取尺寸的方法放入nextTick()，就可以直接获取到 —— 因为nextTick是等dom更新完成后立马执行他的回调函数，注意，是dom更新完成后才执行

	// 全局中使用
	Vue.$nextTick(fn())
	// 内部中使用
	this.$nextTick(fn())

【案例借用于某大佬的，不记得谁了…不好意思】

<div id="app">
    <p ref="myWidth" v-if="showMe">{{ message }}</p>
    <button @click="getMyWidth">获取p元素宽度</button>
</div>
new Vue({
  el: '#app',
  data: {
    showMe: false,
    message: ''
  },
  methods: {
    getMyWidth() {
      this.showMe = true;
      // this.message = this.$refs.myWidth.offsetWidth;
      //报错 TypeError: this.$refs.myWidth is undefined
        this.$nextTick(()=>{
            //dom元素更新后执行，此时能拿到p元素的属性
            this.message = this.$refs.myWidth.offsetWidth;
      })
    }
  },
})

数据流的理解

当你拿到项目的时候，最好先整理一些内容

• 清楚模块功能
• 注意一些细节地方，如果模糊不清，一定要问产品
• 了解如何实现这些功能
• 后端数据获取到后，要明白数据每个属性的意义

在当你做交互的时候，首先要考虑数据的流向

• 分多个组件
• 全放一个文件

当页面有由多个组件组成，那就是模块化开发了，但是对于数据的流向就要考虑清楚

• 公共数据都存放在父组件中
• 私有数据【只有一个模块使用，并且数据不会被更改】，父子组件中都可以管理
• 私有数据【只有一个模块使用，并且数据会被更改】，只能由父组件管理，通过props传参，并且子组件中需要watch监听数据，使用this.$emit()发射给父组件更新数据，（见下面的例子）
• 多个子组件同时需要一个数据，父组件管理数据

// 【只有一个模块使用，并且数据会被更改】
// 当子组件需要父组件的一个数据时，在子组件中，数据因为交互变化了后，将变化后的数据传给父组件，父组件更新数据
props:{
   data: {
       type: Object,
       default: ()=>{}
   }
},
watch: {
   data: {
       deep: true // 深度监听对象数据变化
       immediate： true  // 页面加载时开始监听属性
       handler(newVal,oldVal){
           this.$emit('dataChange',this.data)
       }
   }
}