[컴] vuejs 에서 private member 사용법

 뷰js / private members / vue.js

vuejs 에서 private member 사용법

private variables

created() hook 에서 만들면 된다.

created() 가 호출될때 vue 는 이미 observation phase 를 끝낸 상태라서 이 변수들은 reactive 하지 않는다.[ref. 1]

created: function () {
    this.myVariable = '';
}

private methods

ref. 2 에 private property 에 대한 사용법이 나온다. 아래처럼 사용하면 된다.

var _ = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default _

주의, private static

아래처럼 private variable(_count) 을 사용할 때는 주의해야 한다. 아래처럼 사용하고, component 를 여러번 호출하면, _count 값이 공유된다. 만약 myComp 를 4번 호출한다면, _count 값도 4가 된다.(publicMethod() 가 호출된다는 가정을 하고)

그래서 아래처럼 사용하는 것은 private static 의 느낌이라고 보면 될 것 같다.

var myComp = {
  // ...
  methods: {
    publicMethod() {
      // ...
      _count++
    }
  }
}

let _count = 0

export default myComp

References

1. Private variables in VueJS - Code Rethinked
2. Style Guide — Vue.js