Vue 인스턴스

Vue 응용 프로그램은 Vue 함수에서 Vue 인스턴스를 생성하는 데 사용할 수 있습니다.
옵션 객체를 통해 Vue 인스턴스를 생성합니다.
모든 옵션의 목록은 Vue입니다.js 공식 참조API 참조를 참조하세요.
Vue 인스턴스 생성

var vm = new Vue({
  // オプションオブジェクト
})

Vue는 MVVM(Model-View-ViewModel) 디자인의 영향을 받아 제작되었습니다.

Vue 인스턴스 생성

Vue 인스턴스를 만들 때 활성 시스템에 자신의 데이터 객체의 모든 속성을 추가합니다.
부분

<div id="app">
  <p> {{ userName }} </p>
</div>

javascript 부분

let userData = { userName: '山田太郎' }

let vm = new Vue ({
  el: '#app',
  data: userData
})

데이터가 변경되면 View가 다시 렌더링됩니다.
브라우저의 개발자 도구Constore에서 시도해 보십시오.
브라우저의 개발자 도구에 대한 Constore

// インスタンスのプロパティに値を代入する
vm.userName = '川田良助' // 山田太郎　=> 川田良助

// インスタンスのプロパティに代入された元のデータにも反映される
vm.userName // => 川田良助
userData.userName // => 川田良助

// 元のデータに値を代入する
userData.userName = '加藤一二三' // 川田良助　=> 加藤一二三

// 元のデータが書き換わるとインスタンスのプロパティも書き換わります
userData.userName // => 加藤一二三
vm.userName // => 加藤一二三

새 속성을 추가하려면 뷰를 다시 렌더링하지 않습니다.
부분

<div id="app">
  <p> {{ userName }} </p>

  <!-- Property or method "userAge" is not defined on the instanceというwarnが発生しますがプロパティがインスタンスに定義されていないとどうなるか確認するためのコードなので無視します -->
  <p> {{ userAge }} </p>
</div>

javascript 부분

let userData = { userName: '山田太郎' }

let vm = new Vue ({
  el: '#app',
  data: userData
})

브라우저의 개발자 도구Connsole에 userage 속성을 추가하고 값을 대입합니다.
브라우저의 개발자 도구에 대한 Constore

vm.userAge = 23
23

브라우저 화면

山田太郎
※インスタンスにプロパティを追加したタイミングで再レンダリングされ23と表示さてほしかった

다시 추가할 수 있지만 화면에 다시 표시되지는 않습니다.
그러나 주기적인 속성 값은 계속 변경합니다.
브라우저의 개발자 도구에 대한 Constore

vm.userName = '加藤一二三'
"加藤一二三"

브라우저 화면

加藤一二三
24

렌더링을 진행하고 정의를 추가한userAge도 렌더링됩니다. 단, 초기 렌더링 시 Console에 경고문이 표시되기 때문에 강제 렌더링을 추가하는 방법은 예상치 못한 오류가 발생할 수 있으니 멈추십시오.
나중에 속성이 필요하다는 것을 알게 되면 비어 있지 않아도 초기 값을 미리 설정합니다.
부분

<div id="app">
  <p> {{ userName }} </p>

  <p> {{ userAge }} </p>
</div>

javascript 부분

let userData = { 
  userName: '山田太郎',
  userAge: null
}

let vm = new Vue ({
  el: '#app',
  data: userData
})

Vue 인스턴스에는 몇 가지 편리한 속성과 방법이 있습니다.
이것은 사용자가 정의한 속성과 구별하기 위해 머리에 달러를 넣었다.
부분

<div id="app">
  <p> {{ userName }} </p>
</div>

javascript 부분

let userData = { 
  userName: '山田太郎',
}

let vm = new Vue ({
  el: '#app',
  data: userData
})

브라우저의 개발자 도구Constore에서 시도해 보십시오.
브라우저의 개발자 도구에 대한 Constore

vm.$data === data
true

vm.$el === document.getElementById('app')
true

인스턴스 속성 및 메소드 목록은 를 참조하십시오.

인스턴스 주기 연결

Vue 인스턴스는 생성 시 일련의 초기화를 수행합니다.
초기화 과정에서 생명주기 연결(lifecycle hooks)이라는 함수를 실행하고 특정 단계에 사용자 자신의 코드를 추가한다.
모든 라이프 사이클 연결은 this에서 Vue 인스턴스로 실행됩니다.

수명 주기 연결 요약

beforeCreate
실례가 초기화될 때 동기화

created
인스턴스 생성 후 동기화 호출
서버 및 클라이언트 측 모두

beforeMount
인스턴스를 마운트하기 전에 호출
클라이언트에서만 beforeMount에서 호출

mounted
인스턴스 마운트 후 호출

beforeUpdate
Virtual DOM을 다시 그리기 전에 업데이트 상태

updated
Virtual DOM을 다시 그린 다음

라고 하는 업데이트 상태

beforeDestroy
실례가 버려지기 전에 호출됨

destroyed
실례가 버려진 후 호출됨

나는 언제 너를 부르라고 썼는지 썼지만, 어떤 사람이 좀 더 상세하게 썼기 때문에, 나는 링크를 위에 놓았다.
API 참조

주의

인스턴스 속성이나 콜백에 Arro 함수를 사용하지 마십시오.
Arror 함수에 this가 없기 때문에 this는 Vue.js의 생명주기 노트 에서 다른 변수와 같은 값을 찾을 때까지 부역을 검색하여 오류가 발생합니다.
예제

created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())

잘못된 내용

Uncaught TypeError: Cannot read property of undefined

Uncaught TypeError: this.myMethod is not a function

라이프 사이클 다이어그램

지금은 이 도표를 완전히 이해할 필요가 없으니 방금 설명한 생명주기 연결에 주의하세요.
에폭시 기

참고 자료

Vue.Js 공식 참조
Vue.js의 생명주기 노트