Vue : 동일한 구성 요소를 여러 번 만들 때 어떤 일이 발생합니까?

Vue에서 새로운 기능입니다. 구성 요소를 동적으로로드하는 작은 Vue 앱이 있습니다. 모듈을 보여줄 때마다 템플릿과 자바 스크립트를 서버에서로드하고 실행합니다. 모듈에서 Vue.component()에 의해 Vue 구성 요소를 만듭니다. 따라서 컴포넌트가 이전에 생성 되었다면, 컴포넌트를 다시 만들면 어떻게 될까요?
Vue는 캐시에 저장하고 새 캐시를 다시 만들지 않거나 캐시하지 않습니다.
Vue가 구성 요소의 생성자에 캐시하면 구성 요소가 표시되었음을 어떻게 알 수 있습니까?Vue : 동일한 구성 요소를 여러 번 만들 때 어떤 일이 발생합니까?

Vue.component("component", { 
    template: '#component', 
    data: function() { 
     return { 
      items: [], 
      total: 0, 
      page: 1, 
      limit: 20 
     } 
    }, 
    created() { 
     index.setExtensionCallback = function(params) { 
      list(params); 
     }; 
     sendListRequest({requestParams: {p: 1, np: this.limit}}); 
    }, 
    methods: { 
     sendListRequest: function(params) { 
      var listingCmd = 21; 
      index.chanadmin.extensionRequest({cmd: listingCmd, requestParams: params.requestParams}); 
     }, 
     list: function(params) { 
      this.items = params.ar; 
      this.total = params.total; 
     } 
    } 
});

고마워요!

출처

2017-12-21 carboncrystal

필자가 테스트 해본 결과 동일한 이름의 구성 요소가 다시 만들어지지 않는 것 같습니다.

Vue.component("comp", { 
 
    template: '#component', 
 
    data: function() { 
 
     return { 
 
      msg: 'first declared compo.',    
 
     } 
 
    },  
 
    created: function() { 
 
     console.log('comp 1'); 
 
    } 
 
}); 
 

 
// mimicking ajax 
 
setTimeout(function() { 
 
    console.log('Ajax Call Knok! knok! 2') 
 
    Vue.component("comp", { 
 
    template: '#component', 
 
    data: function() { 
 
     return { 
 
      msg: 'second declared after 2 second declared compo.', 
 
     } 
 
    }, 
 
    created: function() { 
 
     console.log('comp 2'); 
 
    } 
 
    }); 
 
}, 2000); 
 

 
// console.log(Vue.options.components); 
 
var vm = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     msg: 'Main Instance' 
 
    }  
 
})

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>VueJS</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 
</head> 
 
<body> 
 
    <div id="app"> 
 
     {{ msg }} 
 
     <comp></comp>   
 
    </div> 
 
    
 
    <script type="text/x-template" id="component"> 
 
    <h3>{{ msg }}</h3> 
 
    </script> 
 

 
</body> 
 

 
</html>

는 또한 Vue.options.components 당신은 또한 keys 사용 가능한 새로운 구성 요소 name을 비교하고 다시 선언하는 피할 수 있도록 정의 된 구성 요소 목록을 가지고 있음을 발견했다.

키 값 쌍 Vue.options.components 마지막 구성 요소를 참조하십시오.

KeepAlive: Object 
Transition: Object 
TransitionGroup: Object 
comp: VueComponent(options)

출처

2017-12-21 08:58:04

고마워요! 나는 이해했고, Vue.options.components가 도움이된다. – carboncrystal

Vue : 동일한 구성 요소를 여러 번 만들 때 어떤 일이 발생합니까?

답변

관련 문제