data和props的区别

data和props的区别

• data不需要父组件传值，自身进行维护； 而props需要父组件传值。
• data上的数据都是可读可写的；而props的数据都是父组件传递过来的，而且由于它是单向数据流，因此数据只可以读，无法重新修改。
  （如果传递过来的props值是基本数据类型，子组件直接修改，控制台会报错；如果传递的是引用数据类型，子组件修改其中的某一项属性或数组元素，控制台不会报错，不建议在子组件中直接修改Props的值，因为这样会破坏单一数据流，可能会导致数据的变化无法追踪）

子组件中修改prop的正确操作

1. 如果子组件只想修改后自己使用，不想影响父组件的数据，我们可以在子组件中的data里定义一个变量，让这个变量初始值等于父组件传过来的props值，相当于copy一份props，后面修改就改自己data里的值，这样就不会影响到父组件。
2. 如果处理后想同步到父组件，可以通过this.$emit事件触发父组件修改

data为什么是一个函数

在JS中实例是通过构造函数来创建的，每个构造函数可以new出多个实例，每个实例都会继承原型上的方法或属性。
在vue中，一个vue组件就是一个vue实例，当一个组件被复用多次就会创建多个实例。如果data是对象，多次复用这个组件，某一处改变了data数据，就会影响到其他处复用这个组件的地方，因为对象是引用数据类型。
如果data是一个函数，每次创建一个新的实例之后，就会调用一个新的对象，会给每一个Data数据定义一个新的内存地址，保证了每个组件data的独立性。