Question

我是Vue的新人。我有一个小的Vue应用程序，可以动态加载组件。每次我显示一个模块，我从服务器加载该模块的模板，javascript并运行它。在模块中，我通过Vue.component（）创建一个Vue组件。因此，如果之前已经创建了一个组件，那么当我重新创建它时会发生什么 Vue会缓存它并且不会重新创建新的或不缓存它吗？如果Vue将其缓存在组件的构造函数中，我怎么知道该组件已显示！

data.getData()

谢谢！

Answer 1

我已经对它进行了测试，似乎它没有再创建相同的命名组件，它只使用那个旧组件。

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包含已定义的组件列表，因此您还可以将新组件name与其可用的keys进行比较，并避免重新声明它。

Vue.options.components的键值对查看我们制作的最后一个组件。

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

Vue：多次创建相同组件时会发生什么

1 个答案: