vue 계산 속성과 시계의 차이점은 무엇입니까?

차이점: 1. 계산된 속성은 호출 시 템플릿에서 렌더링되어야 하며, 계산이 의존하는 메타데이터는 호출 시에만 메타데이터를 수정하면 됩니다. 2. 계산된 속성은 기본적으로 깊은 의존성을 가지며, 시계는 기본적으로 얕은 관찰을 합니다. 3. 계산된 속성은 필터링에 적합하며 비동기식일 수 없습니다. 시계는 비동기식 또는 비용이 많이 드는 작업에 적합합니다.

computed

computed는 계산된 속성으로, 의존하는 데이터를 기반으로 새로운 계산 결과를 동적으로 표시합니다.

계산된 속성은 Vue 인스턴스에 추가됩니다. 모든 getter 및 setter의 컨텍스트는 계산된 속성을 통해

Vue 인스턴스에 자동으로 바인딩됩니다호출할 필요가 없습니다DOM에서 직접 사용할 수 있습니다

기본 예

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

결과:

I am 원래 값: "Hello"
나는 계산된 속성의 값입니다: "olleH"

계산된 속성을 사용하지 않으면 message.split('').reverse().join('')은 그러면 템플릿에 너무 많은 선언적 논리를 넣으면 템플릿 자체가 과중해지며, 특히 페이지의 데이터를 처리하는 데 복잡한 논리식을 많이 사용하는 경우 유지관리성에 큰 영향을 미칩니다.

그리고 계산된 속성의 종속성이 변경되지 않으면 캐시가 되어 계산된 값이 다시 계산되지 않습니다

그래서 복잡한 논리를 통해 데이터를 얻어야 한다면 계산된 속성을 사용하는 것이 좋습니다

watch

는 객체이고, 키는 데이터에 해당하는 데이터, 값은 해당 콜백 함수입니다. 값은 메소드 이름일 수도 있고 데이터 데이터가 변경되면 콜백이 발생합니다. Val(수정된 데이터 데이터) 및 oldVal(원본 데이터 데이터)
Vue 인스턴스는 인스턴스화될 때$watch() 호출되어 watch 객체의 각 속성을 탐색합니다

기본 예제

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += &#39;hi&#39;">obj.a + 'hi'</button>
      <button @click="obj = {a:&#39;a&#39;}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

참고:감시자 함수를 정의하기 위해 화살표 함수를 사용해서는 안 됩니다., 화살표 함수에는 이것이 없기 때문입니다. 상위 함수를 상속하지만 상위 함수는 창이므로 화살표 함수의 this가 Vue 인스턴스 대신 창을 가리키게 됩니다

• deep은 이 개체의 속성 변경 사항을 볼지 여부를 즉시 제어합니다
• 첫 번째 렌더링에서 이 함수를 실행할지 여부를 제어합니다. 사용법은 watch 콜백과 유사합니다. vm.$watch('data attribute name', fn, {deep: . ., instant: ..})

vm.$watch("n", function(val, newVal){
      console.log("n 变了");
},{deep: true, immediate: true})

vue 계산 속성과 watch의 차이점

계산 속성과 속성 감지

계산 속성(계산)

속성 감지(감시) 실행 처음으로 time호출 시 템플릿에서 렌더링해야 하며, 계산이 의존하는 메타데이터를 수정해야 합니다.호출 시 메타데이터만 수정하면 됩니다기본 깊은 종속성 기본 얕은 관찰 비동기가 아닌 필터링에 적합 비동기 또는 비용이 많이 드는 작업에 적합 데이터가 복잡한 계산을 거쳐야 하는 경우 계산을 사용하세요. 관련 권장 사항:

	처음 실행되지 않음
데이터를 모니터링하고 watch를 사용하여 데이터 작업 수행

2020년 프론트 엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 권장 사항: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 vue 계산 속성과 시계의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!