vue 계산 속성이란 무엇입니까?

vue 계산 속성: [Vue.js 0.12.8] 버전 이전에는 해당 계산 속성을 읽는 한 해당 getter가 다시 실행됩니다. [Vue.js 0.12.8] 버전에서는 이 측면이 최적화되었습니다. 즉, 계산된 속성이 의존하는 속성 값이 변경된 경우에만 getter가 다시 실행됩니다.

vue 계산된 속성:

1. 계산된 속성

계산된 속성은 종속 속성의 값이 변경되면 이 속성의 값이 자동으로 업데이트되고 관련 DOM 부분이 업데이트된다는 의미입니다. 또한 동기화되고 자동으로 업데이트됩니다.

코드는 다음과 같습니다.

<div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    </div>
    var vm = new Vue({
        el:&#39;#example&#39;,
        data:{
            didi:&#39;didi&#39;,
            family:&#39;family&#39;
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                <!-- this指向vm实例 -->
                return this.didi+this.family
            }
        }
    })

vm.didi 및 vm.family의 값이 변경되면 vm.didiFamily의 값이 자동으로 업데이트되고 DOM 부분도 동기식으로 자동 업데이트됩니다.

　이전 예제에서는 실제로 getter 외에 getter만 제공합니다. 계산된 속성에 대한 설정자를 설정할 수도 있습니다. 코드 예시는 다음과 같습니다.

<div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    </div>
    var vm = new Vue({
        el:&#39;#example&#39;,
        data:{
            didi:&#39;didi&#39;,
            family:&#39;family&#39;
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                get:function(){
                    <!-- this指向vm实例 -->
                    return this.didi+this.family
                },
                <!-- 一个计算属性的setter -->
                set:function(newVal){
                    var names = newVal.split(&#39;&#39;)
                    this.didi = names[0]
                    this.didi = names[1]
                }
            }
        }
    })

vm.didiFamily 값을 설정하면 vm.didi 및 vm.family 값도 자동으로 업데이트됩니다.

2. 계산된 속성 캐싱

계산된 속성의 기능은 정말 매력적이지만 계산된 속성 메서드에서 많은 시간이 소요되는 작업을 수행하는 경우 일부 성능 문제가 발생할 수 있습니다. 예를 들어 계산 속성 getter에서 많은 작업을 수행하기 위해 큰 배열을 반복하면 계산 속성이 자주 호출될 때 불필요한 작업이 많이 발생합니다.

Vue.js 버전 0.12.8 이전에는 해당 계산 속성을 읽는 한 해당 getter가 다시 실행됩니다. Vue.js 버전 0.12.8에서는 이 측면이 최적화되었습니다. 즉, 계산된 속성이 의존하는 속성 값이 변경된 경우에만 getter가 다시 실행됩니다.

Vue 인스턴스에서 관찰된 데이터 속성이 변경될 때만 getter가 다시 실행된다는 문제도 있습니다. 그러나 때로는 계산된 속성이 관찰할 수 없는 실시간 데이터 속성에 의존하는 경우도 있습니다. 코드 예제는 다음과 같습니다.

var vm = new Vue({
   data:{
       welcome:'welcome to join didiFamily'         
    },
   computed:{
        example:function(){
            return Date.now() + this.welcome    
         }       
     }  
})

캐시된 시간 대신 예제에 액세스할 때마다 최신 시간을 가져와야 합니다. Vue.js 버전 0.12.11부터 캐시 스위치가 기본적으로 제공됩니다. 계산된 속성 객체에 캐시 필드를 지정하여 캐싱 활성화 여부를 제어합니다. 코드 예시는 다음과 같습니다.

var vm = new Vue({
   data:{
       welcome:'welcome to join didiFamily'         
    },
   computed:{
        example:function(){
            //关闭缓存，默认为true
            cache:false,
            get:function(){
             return Date.now() + this.welcome               
             }      
         }       
     }  
})

캐시를 false로 설정하고 캐시를 끄면 vm.example에 직접 접근할 때마다 getter 메소드가 다시 실행됩니다.

3. 자주 묻는 질문

실제 개발에서 계산된 속성을 사용할 때 발생하는 다양한 문제는 다음과 같습니다.

계산된 속성 getter가 실행되지 않는 시나리오

　 앞에서 우리는 계산된 속성이 의존하는 데이터 속성이 변경되면 계산된 속성의 getter 메소드가 실행된다는 것을 배웠습니다. 그러나 어떤 경우에는 종속 데이터 속성이 변경되었음에도 불구하고 계산된 속성의 getter 메소드가 실행되지 않는 경우가 있습니다. 그러나 어떤 경우에는 종속 데이터 속성이 변경되었음에도 불구하고 계산된 속성의 getter 메소드가 실행되지 않는 경우가 있습니다.

　　　계산된 속성이 포함된 노드가 제거되고 속성이 템플릿의 다른 곳에서 더 이상 참조되지 않으면 계산된 속성의 해당 getter 메서드가 실행되지 않습니다. 코드 예시는 다음과 같습니다.

<div id="example">
        <button @click=&#39;toggleShow&#39;>Toggle Show Total Price</button>
        <p v-if="showTotal">Total Price = {{totalPrice}}</p>
    </div>
    new Vue({
        el:&#39;#example&#39;,
        data:{
            showTotal:true,
            basePrice:100
        },
        computed:{
            totalPrice:function(){
                return this.basePrice + 1
            }
        },
        methods:{
            toggleShow:function(){
                this.showTotal = !this.showTotal
            }
        }
    })

showTotal을 false로 설정하기 위해 버튼을 클릭하면 P 요소가 제거되고, P 요소 내에서 계산된 totalPrice 속성의 getter 메소드가 실행되지 않습니다. 그러나 계산된 속성이 항상 템플릿에 나타나면 getter 메서드는 계속 실행됩니다

　2. v-repeat에서 계산된 속성 사용

　 때로는 백엔드에서 JSON 데이터 수집을 얻은 후 계산된 속성을 단일 데이터 조각. Vue.js 0.12 이전 버전에서는 v-repeat가 위치한 요소에 v-comComponent 지시어를 사용할 수 있습니다. 코드 예는 다음과 같습니다.

<div id="items">
        <p v-repeat="items" vue-component="item">
            <button>{{fulltext}}</button>
        </p>
    </div>
    var items = [
        {number:1,text:&#39;one&#39;},
        {number:2,text:&#39;two&#39;}
    ]
    var vue = new Vue({
        el:&#39;#items&#39;,
        data:{
            items:items
        },
        components:{
            item:{
               computed:{
                    fulltext:function(){
                        return &#39;item&#39; +this.text
                    }
                }, 
            }
        }
    })

Vue.js 버전 0.12에서 Vue.js는 v-comComponent 지시문을 버렸으므로 v-repeat에서 계산된 속성을 구현하려면 사용자 정의 요소 구성 요소를 사용해야 합니다. 코드 예시는 다음과 같습니다:

<div id="items">
        <my-item v-repeat="items" inline-template>
            
        </my-item>
    </div>
    var items = [
        {number:1,text:&#39;one&#39;},
        {number:2,text:&#39;two&#39;}
    ]
    var vue = new Vue({
        el:&#39;#items&#39;,
        data:{
            items:items
        },
        components:{
            &#39;my-item&#39;:{
               replace:true, 
               computed:{
                    fulltext:function(){
                        return &#39;item&#39; +this.text
                    }
                }, 
            }
        }
    })

관련 무료 학습 권장사항: js 비디오 튜토리얼

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