집 >웹 프론트엔드 >JS 튜토리얼 >vue 계산 속성을 올바르게 사용하는 방법

vue 계산 속성을 올바르게 사용하는 방법

php中世界最好的语言원래의: 2018-04-20 14:24:185021검색

이번에는 vue 계산 속성을 올바르게 사용하는 방법과 vue 계산 속성을 올바르게 사용하기 위한 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

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

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

<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를 여러 번 실행하게 됩니다! 캐싱을 원하지 않으면 대신 메소드를 사용하십시오.

Vue 계산 속성의 사용을 살펴보겠습니다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data: {
          a: 1,
        },
        computed:{
          b:function(){
            return this.a+1;
          }
        }
      });
      console.log(vm.a);
    }
  </script>
</head>
<body>
<p id="box">
  a => {{a}}
  <br>
  b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data: {
          a: 1,
        },
        computed:{
          b:function(){
            return this.a+1;
          }
        }
      });
      document.onclick = function(){
        vm.a = 101;
      }
    }
  </script>
</head>
<body>
<p id="box">
  a => {{a}}
  <br>
  b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data: {
          a: 1,
        },
        computed:{
          b:{
            get:function(){
              return this.a+2;
            },
            set:function(val){
              this.a=val;
            }
          }
        }
      });
      document.onclick = function(){
        vm.b = 10;
      }
    }
  </script>
</head>
<body>
<p id="box">
  a => {{a}}
  <br>
  b => {{b}}
</p>
</body>
</html>

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사를 주목하세요. 중국사이트!