在使用Vue.js
的过程中,经常会遇到 data
和 props
。今天就来探索一下二者的区别。
data
- 类型:
Object
|Function
- 限制 :组件的定义只接受
Function
Vue
实例的数据对象。Vue
将会递归将data
的属性转换为getter/setter
,从而让data
的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的key/value
对):浏览器API
创建的原生对象,原型上的属性会被忽略。大概来说,data
应该只能是数据 - 不推荐观察拥有状态行为的对象。
例:
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
props
- 类型:
Array<string>
|Object
props
可以是数组或对象,用于接收来自父组件的数据。props
可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。
例 :
// 简单语法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 对象语法,提供验证
Vue.component('props-demo-advanced', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
两者最大的区别 :
-
data
不需要用户(开发者)传值,自身维护 -
props
需要用户(开发者)传值
网友评论