vue의 계산된 속성에 대해 자세히 알아보기-View.js-php.cn

vue의 계산된 속성에 대해 자세히 알아보기

青灯夜游

풀어 주다： 2020-11-02 17:54:14

앞으로

2650명이 탐색했습니다.

다음 Vue.js 튜토리얼 열에서는 vue의 계산된 속성을 안내합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

vue의 계산된 속성에 대해 자세히 알아보기

1. 계산된 속성이란 무엇입니까?

템플릿의 표현식은 매우 편리하지만 원래는 간단한 작업을 위해 설계되었습니다. 템플릿에 논리를 너무 많이 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 예를 들면 다음과 같습니다.

<p id="example">
  {{ message.split('').reverse().join('') }}</p>

로그인 후 복사

여기 표현식에는 3가지 연산이 포함되어 있는데 이는 그다지 명확하지 않습니다. 따라서 복잡한 논리가 발생하면 이를 처리하기 위해 계산된 Vue의 특수 계산 속성을 사용해야 합니다.

2. 계산된 속성의 사용

연산, 함수 호출 등 다양한 복잡한 논리는 결과가 반환되는 한 계산된 속성에서 완료될 수 있습니다.

계산된 속성을 사용하여 위의 예를 다시 작성해 보겠습니다

<p id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了</p>

로그인 후 복사

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});

로그인 후 복사

결과:

원본 메시지: "Hello"

계산된 역전 메시지: "olleH"

위 예의 간단한 사용법에 더해 계산된 속성 여러 Vue 인스턴스의 데이터를 사용할 수도 있습니다. 데이터가 변경되는 한 계산된 속성이 다시 실행되고 뷰가 업데이트됩니다.

<body>
    <p id="app">
        <button @click="add()">补充货物1</button>
        <p>总价为：{{price}}</p>
    </p></body>

로그인 후 복사

var app = new Vue({        
       el: '#app', 
   data: {
       package1: {
           count: 5,
           price: 5
       },
       package2: {
           count: 10,
           price: 10
       }
    },
    computed: {
     price: function(){         return this.package1.count*this.package1.price+this.package2.count*this.package2.price　　//总价随着货物或价格的改变会重新计算
     }
    },
    methods: {   //对象的方法
        add: function(){            this.package1.count++
        }
    }
});

로그인 후 복사

간과하기 쉬운 계산된 속성에 대한 두 가지 매우 실용적인 팁이 있습니다.

첫째, 계산된 속성은 다른 계산된 속성에 따라 달라질 수 있습니다. 둘째, 계산된 속성은 현재 Vue 인스턴스의 데이터에 의존할 수 있을 뿐만 아니라 다음에도 의존할 수 있습니다. 다른 인스턴스 , 의 데이터:

    <p id="app1"></p>
    <p id="app2">{{ reverseText}}</p>

로그인 후 복사

var app1 = new Vue({
   el: '#app1',
 data: {
      text: 'computed'
    }
});var app2 = new Vue({
    el: '#app2',
    computed: {
        reverseText: function(){
        return app1.text.split('').reverse().join('');  //使用app1的数据进行计算        }
    }
});

로그인 후 복사

각 계산된 속성에는 getter와 setter가 포함되어 있습니다. 위의 두 가지 예는 계산된 속성의 기본 사용법이며 읽기 위해 getter만 사용합니다.

필요할 경우 일반 데이터를 수정하는 것처럼 계산된 속성의 값을 수동으로 수정하는 경우 setter 함수가 트리거되어 다음과 같은 일부 사용자 지정 작업을 수행합니다.

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: {            // getter
            get: function () {                return this.firstName + ' ' + this.lastName
            },            // setter
            set: function (newValue) {                var names = newValue.split(' ');                this.firstName = names[0];                this.lastName = names[names.length - 1];
            }
        }
    }
});//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

로그인 후 복사

대부분의 경우 계산된 속성을 읽을 때 기본 getter 메서드만 사용합니다. Setter는 비즈니스에서 거의 사용되지 않으므로 계산된 속성을 선언할 때 getter와 setter를 모두 선언하지 않고도 기본 쓰기 메서드를 직접 사용할 수 있습니다.

3. 계산된 속성 캐싱

위의 예에서는 계산된 속성을 사용하는 것 외에도 다음과 같이 표현식에서 메서드를 호출하여 동일한 효과를 얻을 수 있습니다.

<p>{{reverseTitle()}}</p>

로그인 후 복사

// 在组件中methods: {
  reverseTitle: function () {    return this.title.split('').reverse().join('')
  }
}

로그인 후 복사

계산된 속성이 아닌 메서드를 사용하면 두 메서드의 최종 결과는 실제로 정확히 동일합니다. 한 쪽은

reverseTitle()을 사용하여 값을 가져오고 다른 쪽은 reverseTitle을 사용하여 값을 가져옵니다.

그러나 차이점은

계산된 속성은 해당 종속성에 따라 캐시됩니다. 계산된 속성은 관련 종속성이 변경될 때만 재평가됩니다.

제목이 변경되지 않는 한 reverseTitle 계산 속성에 여러 번 액세스하면 함수를 다시 실행할 필요 없이 이전 계산 결과가 즉시 반환됩니다.

간단한 예:

        <p>{{reverseTitle}}</p>
        <p>{{reverseTitle1()}}</p>
        <button @click="add()">补充货物1</button>
        <p>总价为：{{price}}</p>

로그인 후 복사

    computed: {
      reverseTitle: function(){          return this.title.split('').reverse().join('')　　//而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
      },
     price: function(){         return this.package1.count*this.package1.price+this.package2.count*this.package2.price
     }
    },
    methods: {   //对象的方法
        add: function(){            this.package1.count++
        },
        reverseTitle1: function(){            return this.title.split('').reverse().join('')　　//点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
        }
    },

로그인 후 복사

반면, 다시 렌더링이 트리거될 때마다 호출 메서드는

항상함수를 다시 실행합니다.

캐싱이 왜 필요한가요? 거대한 배열을 탐색하고 많은 계산을 수행해야 하는 값비싼 계산 속성

A이 있다고 가정해 보겠습니다. 그러면 A 에 의존하는 다른 계산된 속성이 있을 수 있습니다.

캐시가 없으면 필연적으로

A의 getter가 여러 번 실행됩니다! 캐싱을 원하지 않으면 대신 메소드를 사용하십시오.