vuejs에서 데이터와 소품의 차이점은 무엇입니까-View.js-php.cn

vuejs에서 데이터와 소품의 차이점은 무엇입니까

青灯夜游

풀어 주다： 2021-10-26 16:12:44

원래의

5011명이 탐색했습니다.

vuejs에서 데이터와 props의 차이점: 1. 데이터는 사용자(개발자)에게 값 전달을 요구하지 않고 자체적으로 유지 관리되지만 props에서는 사용자(개발자)에게 값 전달이 필요합니다. 2. 데이터의 데이터는 읽고 쓸 수 있지만 props의 데이터는 읽기만 가능하고 재할당할 수 없습니다.

vuejs에서 데이터와 소품의 차이점은 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue.js를 사용하는 과정에서 data와 props를 자주 접하게 됩니다. 오늘은 이 둘의 차이점에 대해 알아보겠습니다. 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(&#39;props-demo-simple&#39;, {
  props: [&#39;size&#39;, &#39;myMessage&#39;]
})

// 对象语法，提供验证
Vue.component(&#39;props-demo-advanced&#39;, {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

로그인 후 복사

两者的区别：

区别一：

data不需要用户（开发者）传值，自身维护

props

데이터

유형: 객체 | /code>
제한사항: 구성요소 정의는 Function
Vue 인스턴스의 데이터 객체만 허용합니다. Vue는 data의 속성을 getter/setter로 재귀적으로 변환하여 data의 속성이 다음에 응답할 수 있도록 합니다. 데이터 변경. 객체는 순수 객체(0개 이상의 키/값 쌍 포함)여야 합니다. 프로토타입의 브라우저의 API 속성에 의해 생성된 기본 객체는 무시됩니다. 대략적으로 말하자면, data는 데이터여야 합니다. 상태 저장 동작이 있는 객체를 관찰하는 것은 권장되지 않습니다.
예:

rrreee소품

유형: 배열<string></string>| 객체
props는 배열 또는 객체일 수 있으며 상위 구성 요소로부터 데이터를 수신하는 데 사용됩니다. props는 간단한 배열일 수도 있고 대신 객체를 사용할 수도 있습니다. 이를 통해 유형 감지, 사용자 정의 유효성 검사, 기본값 설정과 같은 고급 옵션을 구성할 수 있습니다.
예:

rrreee