son.vue使用watch监听props数据，当props传递过来的值不能直接使用的时候，就可以使用computed（计算属性）了

父组件：
father.vue

<template>
<div>
<son :url="link_url"></son>
</div>
</template>

<script>
import son from "@/components/son"
export default {
  data(){
      return{
          link_url:'',
      }
  },
  
  ...
  ...
}
<script>

子组件：
son.vue

<template>
<div>
...
...
</div>
</template>

<script>
export default {
  data(){
      return{
          switchData:this.vid
      }
  },
  props: {
      url:{
          type:String
      }

  },
  computed:{
      switchData:function(){
          return this.switchData
      }
      
  },
 watch: {
  link_url(newV, oldV){//
         // do something, 可使用this
         **this.switchData**=newV
        console.log(newV,oldV)
  }
  /**link_url:{ //深度监听，可监听到对象、数组的变化
      handler (newV, oldV) {
        // do something, 可使用this
        console.log(newV,oldV)
      },
      deep:true
     }**/
},
  ...
  ...
}
<script>

拓展：如果需要开启首次赋值监听，如下

 link_url:{ //深度监听，可监听到对象、数组的变化
      handler (newV, oldV) {
        // do something, 可使用this
        console.log(newV,oldV)
      },
      deep:true,
      immediate: true,// 该回调将会在侦听开始之后被立即调用
     }