Vue 계산 속성, 메소드 및 리스너를 시작하는 예

초보자를 위한 Vue 학습 시 계산된 속성, 메소드, 청취자는 필수 지식 포인트입니다. 편의와 단순성을 위해 이번에는 계산된 속성, 메서드 및 리스너라는 세 가지 메서드를 사용하여 동일한 효과를 얻기 위해 동일한 예를 사용합니다. 더 이상 고민할 필요 없이 그냥 차에 타세요.

효과:

Vue에서 name1과 name2 두 개의 값을 정의했습니다. 예상되는 효과는 name을 html로 출력하는 것이며 name은 name1+name2의 연결입니다. name1이 변경되거나 name2가 변경되는지 여부에 관계없이 name은 그에 따라 변경됩니다.

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            }
        })
     </script>

브라우저 효과:

1. 계산된 속성 구현 효과

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            computed:{
                name:function(){
                 return this.name1+&#39; &#39;+this.name2;
              }
            }
        })
    </script>

분석: 계산은 문자 그대로 계산될 수도 있습니다. 즉, name1과 name2를 함께 연결하는 것입니다. 마지막으로 이름이 생성됩니다.

계산된 속성은 캐시됩니다. 즉, name1 또는 name2가 변경되어 캐시의 값과 다른 경우에만 다시 계산됩니다.

name1 또는 name2가 변경되지 않으면 계산된 값이 다시 계산되지 않습니다.

2. 효과를 얻기 위한 Method 방법

<div id="root">
        {{name()}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            methods:{
                name:function(){
                    return this.name1+&#39; &#39;+this.name2;
                }
            }
            
        })
    </script>

참고: 보간 표현식 {{name()}}에는 괄호가 있어야 합니다.

계산된 속성과 달리 페이지가 한 번 로드되면 메서드가 한 번 실행되며 캐싱이 없습니다.

3. 리스너 구현 효과

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            },
            watch:{
                name1:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                 },
                name2:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                }
            }

참고: 모니터링은 name1 및 name2의 변경 사항을 모니터링하는 것으로 이해하면 됩니다. 여기에는 이름에 대한 기본값이 있습니다.

마지막으로

세 가지 방법 모두 동일한 방법을 얻을 수 있는데 어떤 방법이 가장 좋은가요?

가장 좋은 것은 첫 번째 계산된 속성입니다. 두 번째 방법에 비해 계산된 속성이 캐시되어 성능이 절약되며, 세 번째 방법에 비해 코드가 더 간단합니다.

모두가 능숙해지면 점점 더 잘 이해하게 될 것입니다.

위 내용은 Vue 계산 속성, 메소드 및 리스너를 시작하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!