When Vue uses dynamic components or router, how can multiple new instances be generated when multiple views use/point to the same component?

  javascript, vue.js

My needs:

I want to be a list component, whose list is managed by itself inside the component.
My SPA has N views (dynamically generated), each of which uses the above components. In the way of dynamic components and vue-router, it is found that the components have not actually generated multiple instances.

After reviewing the data and writing demo, it seems that only when the component tag or new is explicitly used to mount will a new instance be generated.

After reading demo written by others, I found that it is actually the same component and the same instance, but the data rendering transmitted by each view is different, which may be more in line with model-view-viewmodel’s thinking.

But I want to know, Vue does not recommend generating new instances for every view? Or is my understanding wrong? Is there a way to dynamically generate views and generate corresponding new instances?

(The reason for this idea may be that I want to keep dom and data of each page, and don’t want to re-render each time I cut the page. This is very simple for different views with different components. Use keep-alive to cache, but it seems different when multiple views share the same component.)

Novice questions, please master not stint.

1. Use Vue dynamic components:

//dynamic view
 <component :is="currentView" keep-alive></component>
//Component Definition
 var ItemView = Vue.component('ItemView', {
 template: '<div><span>{{name}}</span><input v-model="name" /></div>',
 data: function(){
 return {
 name: 'test'
 bracket
 },
 created: function () {
 console.log('created test');
 bracket
 })
//register view
 components: {
 hot: ItemView ,
 new: ItemView
 bracket

In this way, I modified it in the input boxNameThe value of, found another when switching viewsNameAlso revised.
I think this shows that the switching is the same instance, but I expect the effect to be two instances with data being two isolated scopes. .

2. use vue-router

//route mapping
 '/hot': {
 name: 'hot',
 component: require('ItemView.vue')
 },
 '/new': {
 name: 'new'
 component: require('ItemView.vue')
 bracket
// ItemView.vue
 data() {
 return {
 name: ''
 bracket
 },
 route: {
 activate({next}){
 console.log('activate');
 this.pno = this.$route.name;
 next();
 },
 data({next}){
 console.log(this.name);
 next();
 bracket
 bracket

In router mode, switching routes is discovered, activate is executed only once, and data hook outputsNameThis is the first route name to enter. after canReuse is set, activate will execute every time and the output will be normal.

However, it gives me the feeling that a component is cutting, and every time the data is changed in the hook inside.

But I hope each view corresponds to a new instance.

Encountered the same problem, so I will tell you my solution.
Use Extensions when configuring component for routing inside, or use es6 deconstruction

import comp1 from './comp1'
 
 routes = [
 bracket
 name: 'comp1',
 component: {extends:comp1}
 },
 bracket
 name: 'comp2',
 //Implement with Deconstruction
 component: {...comp1}
 bracket
 bracket

There are also attempts to create an instance using the following method, but it does not work

const View = Vue.extend(comp1)
 ...
 component: new View()
 ...