vuejs中data与props有哪些区别

这篇文章主要讲解了“vuejs中data与props有哪些区别”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vuejs中data与props有哪些区别”吧！

vuejs中data与props的区别：1、data不需要用户（开发者）传值，自身维护；而props需要用户（开发者）传值。2、data上的数据都是可读可写的；而props上的数据只可以读的，无法重新赋值。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

在使用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需要用户（开发者）传值

区别二：

1、data上的数据都是可读可写的，

2、props上的数据只可以读的，无法重新赋值

感谢各位的阅读，以上就是“vuejs中data与props有哪些区别”的内容了，经过本文的学习后，相信大家对vuejs中data与props有哪些区别这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！