vue.js 2에서 계산된 것과 탑재된 것의 주요 차이점은 무엇인가?

vue.js 2에서 계산된 것과 탑재된 것의 주요 차이점은 무엇인가?

덧붙이자면 computed() 대신에 mounted() 그것은 오류를 발생시킨다.

export default {
  components: {
    MainLayout
  },
  mounted(){
    var x = document.getElementById('homeTabPanes');
    // x.style.background = "blue";
    console.log("check the value of x", x);
  }
}

computed는 데이터를 반환하는 메서드를 포함하는 개체로, 마운트된 것은 인스턴스가 마운트된 후 실행된 수명 후크로서, 설명하기 좋은 문서에 대한 링크를 확인하십시오.

~로부터

..기존 속성은 종속성을 기반으로 캐시된다.계산된 속성은 그것의 의존성 중 일부가 변경된 경우에만 재평가된다.

데이터를 캐시하려면 반면에 계산된 속성을 사용하십시오.mounted라이프사이클 후크(Lifecycle Hook)로, DOM에 Vue 인스턴스가 탑재되는 즉시 호출되는 방법이다.

템플릿 내 표현은 매우 편리하지만, 간단한 조작을 위한 것이다.템플릿에 논리를 너무 많이 넣으면 템플릿이 비대해지고 유지 관리가 어려워질 수 있다.그렇기 때문에 어떤 복잡한 논리에 대해서도 계산된 속성을 사용해야 한다.

기본 예

<div id="reverseMessageContainer">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

아래 j를 보십시오.

var vm = new Vue({
  el: '#reverseMessageContainer',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
}) 

여기에서 계산된 속성이 revertMessage라고 선언하였다.제공한 기능은 vm.reversedMessage 속성에 대한 getter 함수로 사용될 것이다.콘솔을 열고 예제 VM을 직접 사용하여 재생할 수 있다.vm.reversedMessage 값은 항상 vm.message 값에 따라 달라진다.

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

더 나은 이해를 위해 당신은 https://vuejs.org/v2/guide/computed.html을 방문하면 된다.

참조URL: https://stackoverflow.com/questions/48520448/what-is-the-main-difference-between-computed-and-mounted-in-vue-js-2