vue props原理

Posted 2023-05-04

参考技术A 1、props传值基本类型，在父子组件中，数据都是响应式的。在子组件中改变props属性的值，不会影响父组件。父组件中的改变会影响子组件。
2、props传值引用类型（如对象），在父组件中，会对该对象的所有属性进行拦截，而在子组件中，只会拦截最上层的属性。所以如果在子组件中修改对象的属性，父组件中的值会更新。父组件中的改变同样会影响子组件。但是如果直接替换掉整个对象，则父组件中的数据不会发生改变，如果直接替换整个对象，vue会抛出错误Avoid mutating a prop directly
3、在父组件中改变对应的data,子组件中的值也会改变。之所以要在子组件中再对props的数据用watch进行监听，是需要在数据变化时做一些操作。不如如果props中的值是在echarts中使用的话，数据改变不会自动刷新图表，所以需要监听，这样就知道什么去刷新图表。

在created函数调用之前，调用了initProps方法，该方法会遍历vm.$options.propsData对象，然后使用Object.defineProperty拦截所有的key。
第一步 两个关键的步骤，
1、拦截属性的get/set，调用 defineReactive$$1传了四个参数，所以才不会拦截对象的属性。详见第二步的方法。
2、使用proxy进行访问转接，所以我们能使用this.xx直接访问到this. vm._props.xx

第二步

关于vue-router传参的理解

参考技术A 1、受限于url长度限制、地址栏url不美观
2、刷新后参数不会丢失
3、设置props函数模式，将查询字符串以props形式传入路由组件，实现路由与组件解耦

1、受限于url长度限制、地址栏url不美观、路径需要拼接且有顺序要求、
3、设置 props布尔模式 ，将参数通过props传入路由组件，实现路由与组件解耦
4、刷新参数不会丢失

1、刷新后params状态会丢失
2、参数数量大小没有限制
3、设置 props布尔模式 ，将参数通过props传入路由组件，实现路由与组件解耦