Vue：同じコンポーネントを何回も作成するとどうなりますか

私はVueで新しいです。私はコンポーネントを動的にロードする小さなVueアプリを持っています。モジュールを表示するたびに、テンプレート、このモジュールのjavascriptをサーバーからロードして実行します。モジュールでは、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：同じコンポーネントを何回も作成するとどうなりますか

答えて

関連する問題