vue options정리-1 (data)

-data-

 

type: function

설명

컴포넌트 인스턴스에 데이터 객체를 반환하는 함수입니다.

 

Ex>

// 인스턴스를 생성합니다.
const data = { a: 1 }

// 객체를 컴포넌트 인스턴스에 추가합니다.
const vm = Vue.createApp({
  data() {
    return data
  }
}).mount('#app')

console.log(vm.a) // => 1

import { Options, Vue } from "vue-class-component";
@Options({
  data() {
    return {
      test2: "etst2",
    };
  },
})
export default class Home extends Vue {}

import { Vue } from "vue-class-component";
export default class Home extends Vue {
data() {
    return {
      id: "",
      password: "",
    };
  }
}

 

how to working?

var t1=1;
var t2=2;

function sum(t1,t2){
	console.log(t1+t2);
}

sum(t1,t2);
//3
t1=2;

이런식으로 함수의 매개변수 값을 바꿔도 js는 함수의 출력결과를 변화시킬 수 없다.

그래서 js는

• 값 중 하나라도 변경되는지 여부를 감지합니다.
• 값을 변경하는 함수가 호출되는지 추적합니다.
• 함수를 호출하여 변경을 발생시켜 최종 값을 갱신합니다.

그럼 vue는?

자바스트립크 객체를 data옵션으로 어플리케이션이나 컴포넌트 인스턴스에 전달하면, Vue는 주어진 객체의 모든 프로퍼티를 프록시(Proxy)로 변환시킵니다.

Proxy?

프록시(Proxy)는 다른 객체나 함수를 감싸는 객체이며, 원본으로의 호출을 중간에 가로채서 처리할 수 있게 합니다. 

 

참고 자료

데이터 | Vue.js

 

깊은 반응성 | Vue.js