子组件监听父组件属性绑定传递参数的变化

在Vue里父组件给子组件间使用props方式传递数据，但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。
一、生命周期函数——通过props中的传递过来的父组件参数让子组件dom发生变化
1、问题引入

• 一开始遇到把值从父组件绑定传值到子组件，子组件（举例简化了一下）：

其中baseData即为父组件属性绑定传过来的数据。这里的html页面有直接引用父页面数据，可以通过父页面数据使页面发生改变。
结果，正常执行。此子组件刚加载，即会执行beforeUpdate()。我以为是props中数据发生改变，即会触发beforeUpdate()。

• 事实并非如此。因为后面又遇到了这个问题，用了类似的方法。

其中relyData即为父组件属性绑定传过来的数据。这里的html页面没有直接引用父页面数据，而是想通过父页面传值过来后，props中数据接收值发生了改变，然后触发beforeUpdate()方法来进行页面显示判断，然后echart初始化表格。
结果，beforeUpdate()方法根本就没被触发，说明props中数据发生改变根本不会触发beforeUpdate生命周期。

2、生命周期函数的测试

  
  
  



  

    
{{msg}}
    
  

  

进行了一下简单的生命周期测试，正常加载一个组件，beforeUpdate不会触发。
而通过按钮触发修改data中数据，或者直接在mounted()中改变data中msg的值，都会触发beforeUpdate()。
那为什么第一个例子的子组件中，父组件传值过来后，data数据也没发生改变，却触发了beforeUpdate()？
3、结论
对比了一下是，第一个例子的子组件中，虽然页面加载时虽然data没有改变，但是页面发生改变了（通过父组件传过来的值加载了部分内容），即 v 层发生了变化，相对的就触发了beforeUpdate()。
所以只要修改一下第二个例子的子组件，让他的页面也会因为父组件传值而发生变化，即可实现传之后触发beforeUpdate()。

二、watch监听props参数
说句实话，上面想的太复杂了，其实只要watch监听 props父组件传递过来的参数变化，不就可以直接执行父组件参数改变需要执行的逻辑内容了么。（最终代码）