vue 계산 속성과 시계의 차이점은 무엇입니까?-View.js-php.cn

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

青灯夜游

풀어 주다： 2020-11-30 17:03:36

원래의

21810명이 탐색했습니다.

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

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

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호출 시 템플릿에서 렌더링해야 하며, 계산이 의존하는 메타데이터를 수정해야 합니다.호출 시 메타데이터만 수정하면 됩니다기본 깊은 종속성 기본 얕은 관찰 비동기가 아닌 필터링에 적합 비동기 또는 비용이 많이 드는 작업에 적합 데이터가 복잡한 계산을 거쳐야 하는 경우 계산을 사용하세요. 관련 권장 사항: