vue中如何监听props的变化

应用场景
在vue中父子组件是通过props传递数据的。通常有以下几种场景：

子组件展示父组件传递过来的props，一般是字符串
子组件接受父组件传递过来的props，作为本地数据使用
子组件接受父组件的传递过来的props，进行转换后展示（计算得到某个值）
子组件修改父组件传递过来的props

子组件展示父组件传递过来的props
【1】传递的prop是基础类型的值，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
【2】传递的数据类型是引用类型，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
子组件接受父组件的props作为本地数据使用

定义一个本地的data属性，将这个prop作为初始值

【1】传递的prop是基础类型的值，父组件改变data，子组件不改变
parent.vue

复制代码
child.vue

复制代码
【2】传递的数据类型是引用类型，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
子组件接受父组件的props进行转换后展示

用这个prop的值定义一个计算属性

【1】传递的prop是基础类型的值，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
【2】传递的数据类型是引用类型，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
子组件修改父组件传递过来的props
【1】传递的数据类型是基础类型，子组件修改父组件传递过来的props,报错。
【2】传递的数据类型是引用类型，子组件将父组件传递过来的props作为本地数据，子组件修改父组件传递过来的props,父组件也会随之改变。
总结：
【1】子组件接受父组件传递过来的props仅作为展示时：无论什么数据类型，父组件改变，子组件随之改变。
对于这个场景，子组件只是展示，子组件随父组件变化是符合场景需求的
【2】子组件接受父组件传递过来的props作为本地数据时：prop为基础类型的值，父组件改变，子组件不变；prop为引用类型的值，父组件改变，子组件随之改变。
对于这个场景，子组件是在父组件的数据基础上进行加工，父组件数据改变，子组件是希望同步响应的，解决的方法：使用watch来监听prop。产生这个问题的原因是，因为生命周期的关系，组件的data属性，在reated,只在初始化的时候赋值了一次。
【3】子组件接受父组件传递过来的props作为计算属性时：无论什么数据类型，父组件改变，子组件随之改变。
【4】子组件修改父组件，基础类型的值报错；引用类型的值父组件也改变
参考链接：

www.jianshu.com/p/ff708a773…

作者：苯宝宝
链接：https://juejin.cn/post/6873053158173179918
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

再总结 props应用类型的 子修改 父一起修改
看场景 如果需要数据隔离，进入给子的时候deepclone下，隔离的数据要修改后给父，emit update，emit自定义方法通知父类接受修改的数据，
数据隔离的场景还是复杂了操作。能避免尽量避免

标签：city,vue,传递,改变,props,组件,监听
来源： https://www.cnblogs.com/ellafive/p/16205326.html