Vue 中 props 传值,父组件向子组件传递对象可以直接修改的问题
-
强调 VUE 的单向数据流动的规则;
-
子组件 prop 的使用:
除非只是对数据进行展示使用,否则应尽量避免直接使用 prop 参数;若需要修改prop 的情况:
1. 针对修改数组和对象的属性,可以定义一个本地的 data property 并将这个 prop 作为其初始值:(定义新的Data 中的属性,就是起到了隔离的作用)
作为一个通用规则,应该避免直接修改任何 prop,包括对象和数组,因为这种做法无视了单向数据绑定,且可能会导致意料之外的结果。
props: {
// 初始化计数
initialCounter: {
type: Number,
default () {
return 0;
}
},
}
data() {
return {
counter: this.initialCounter
}
}
- prop 以一种原始的值传入且需要进行转换, 在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
props: ['size'],
computed: {
normalizedSize() {
return this.size.trim().toLowerCase()
}
}
- 在内存空间中的数据是如何存储的.
代码内存空间主要是存储可执行代码的
栈内存空间就是调用栈,是用来存储执行上下文的
-> 对象的指针存放在栈内存中
堆内存空间是用来储存引用数据类型的
-> 指针指向的对象存放在堆内存中
![](https://img.haomeiwen.com/i6449491/fe46a91d1ffc3910.png)
网友评论