Chỉ là một câu hỏi nhanh.

Bạn có thể buộc Vue.jsphải tải lại / tính toán lại tất cả mọi thứ? Nếu vậy thì thế nào?

Hãy thử phép thuật này:

vm.$forceUpdate();

Không cần tạo bất kỳ bình treo nào :)

Cập nhật: Tôi tìm thấy giải pháp này khi tôi chỉ bắt đầu làm việc với VueJS. Tuy nhiên thăm dò thêm đã chứng minh cách tiếp cận này như một cái nạng. Theo như tôi nhớ, trong một thời gian, tôi đã loại bỏ nó chỉ đơn giản là đặt tất cả các thuộc tính không tự động làm mới (chủ yếu là các thuộc tính lồng nhau) vào các thuộc tính được tính toán.

Thêm thông tin tại đây: https://vuejs.org/v2/guide/computing.html

Đây có vẻ là một giải pháp khá sạch từ matthiasg về vấn đề này :

bạn cũng có thể sử dụng :key="someVariableUnderYourControl"và thay đổi khóa khi bạn muốn xây dựng lại thành phần

Đối với trường hợp sử dụng của tôi, tôi đã cho Vuex getter vào một thành phần như một chỗ dựa. Bằng cách nào đó Vuex sẽ lấy dữ liệu nhưng độ phản ứng sẽ không đáng tin cậy để khởi động lại thành phần. Trong trường hợp của tôi, việc đặt thành phần thành keymột số thuộc tính trên prop đảm bảo làm mới khi cuối cùng các getters (và thuộc tính) được giải quyết.

Tại sao?

... bạn có cần cập nhật không?

Có lẽ bạn không khám phá Vue một cách tốt nhất:

Để Vue tự động phản ứng với các thay đổi giá trị, các đối tượng phải được khai báo ban đầudata . Hoặc, nếu không, chúng phải được thêm bằng cách sử dụngVue.set() .

Xem bình luận trong bản demo dưới đây. Hoặc mở bản demo tương tự trong một JSFiddle tại đây .

new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Edson'
    }
  },
  methods: {
    changeName() {
      // because name is declared in data, whenever it
      // changes, Vue automatically updates
      this.person.name = 'Arantes';
    },
    changeNickname() {
      // because nickname is NOT declared in data, when it
      // changes, Vue will NOT automatically update
      this.person.nickname = 'Pele';
      // although if anything else updates, this change will be seen
    },
    changeNicknameProperly() {
      // when some property is NOT INITIALLY declared in data, the correct way
      // to add it is using Vue.set or this.$set
      Vue.set(this.person, 'address', '123th avenue.');
      
      // subsequent changes can be done directly now and it will auto update
      this.person.address = '345th avenue.';
    }
  }
})

/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>person.name: {{ person.name }}</span><br>
  <span>person.nickname: {{ person.nickname }}</span><br>
  <span>person.address: {{ person.address }}</span><br>
  <br>
  <button @click="changeName">this.person.name = 'Arantes'; (will auto update because `name` was in `data`)</button><br>
  <button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)</button><br>
  <button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button>
  <br>
  <br>
  For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>

Để thành thạo phần này của Vue, hãy kiểm tra Tài liệu chính thức về Khả năng phản ứng - Thay đổi phát hiện . Cái này là phải đọc!

Vui lòng đọc http://michaelnthiessen.com/force-re-render/

Cách khủng khiếp: tải lại toàn bộ trang
Cách khủng khiếp: sử dụng hack v-if
Cách tốt hơn: sử dụng phương thức ForceUpdate tích hợp của Vue
Cách tốt nhất: thay đổi khóa trên thành phần của bạn

<template>
   <component-to-re-render :key="componentKey" />
</template>

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

Tôi cũng sử dụng đồng hồ: trong một số tình huống.

Cố gắng sử dụng this.$router.go(0);để tải lại thủ công trang hiện tại.

Sử dụng vm.$set('varName', value). Tìm chi tiết vào Change_Detection_Caveats .

Chắc chắn .. bạn chỉ có thể sử dụng thuộc tính khóa để buộc kết xuất lại (giải trí) bất cứ lúc nào.

<mycomponent :key="somevalueunderyourcontrol"></mycomponent>

Xem https://jsfiddle.net/mgoetzke/epqy1xgf/ để biết ví dụ

Nó cũng đã được thảo luận ở đây: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

<my-component :key="uniqueKey" />

cùng với nó sử dụng this.$set(obj,'obj_key',value) và cập nhật uniqueKeycho mọi cập nhật trong giá trị đối tượng (obj) cho mỗi cập nhậtthis.uniqueKey++

nó làm việc cho tôi theo cách này

Vì vậy, có hai cách bạn có thể làm điều này,

1). Bạn có thể sử dụng $forceUpdate()bên trong phương thức xử lý của bạn tức là

<your-component @click="reRender()"></your-component>

<script>
export default {
   methods: {
     reRender(){
        this.$forceUpdate()
     }
   }
}
</script>

2). Bạn có thể cung cấp một :keythuộc tính cho thành phần của bạn và tăng khi muốn đăng ký lại

<your-component :key="index" @click="reRender()"></your-component>

<script>
export default {
   data() {
     return {
        index: 1
     }
   },
   methods: {
     reRender(){
        this.index++
     }
   }
}
</script>

sử dụng chỉ thị v-if

<div v-if="trulyvalue">
    <component-here />
 </div>

Vì vậy, chỉ cần thay đổi giá trị của truevalue từ false thành true sẽ khiến thành phần giữa div được đăng ký lại

Để tải lại / kết xuất lại / làm mới thành phần, hãy dừng mã hóa dài. Có một cách Vue.JS làm điều đó.

Chỉ dùng :key thuộc tính.

Ví dụ:

<my-component :key="unique" />

Tôi đang sử dụng cái đó trong BS Vue Table Slot. Nói rằng tôi sẽ làm một cái gì đó cho thành phần này để làm cho nó độc đáo.

Điều này đã làm việc cho tôi.

created() {
            EventBus.$on('refresh-stores-list', () => {
                this.$forceUpdate();
            });
        },

Thành phần khác kích hoạt sự kiện danh sách cửa hàng làm mới sẽ khiến thành phần hiện tại quay trở lại

Tôi tìm thấy một cách. Đó là một chút hack nhưng hoạt động.

vm.$set("x",0);
vm.$delete("x");

Đâu vmlà đối tượng mô hình xem của bạn vàx là một biến không tồn tại.

Vue.js sẽ phàn nàn về điều này trong nhật ký giao diện điều khiển nhưng nó kích hoạt làm mới cho tất cả dữ liệu. Đã thử nghiệm với phiên bản 1.0.26.

Đã làm cho tôi

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        '$route'() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }

chỉ cần thêm mã này:

this.$forceUpdate()

Chúc may mắn

: key = "$ route.params.param1" chỉ cần sử dụng khóa với bất kỳ thông số nào của bạn, nó tự động tải lại cho trẻ em ..

Tôi gặp vấn đề này với một bộ sưu tập hình ảnh mà tôi muốn đăng ký lại do những thay đổi được thực hiện trên một tab khác. Vì vậy, tab1 = imageGallery, tab2 = FavoritesImages

tab @ change = "updateGallery ()" -> điều này buộc chỉ thị v-for của tôi xử lý chức năng FilteredImages mỗi khi tôi chuyển tab.

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tab: null,
      colorFilter: "",
      colors: ["None", "Beige", "Black"], 
      items: ["Image Gallery", "Favorite Images"]
    };
  },
  methods: {
    filteredImages: function() {
      return this.$store.getters.getImageDatabase.filter(img => {
        if (img.color.match(this.colorFilter)) return true;
      });
    },
    updateGallery: async function() {
      // instance is responsive to changes
      // change is made and forces filteredImages to do its thing
      // async await forces the browser to slow down and allows changes to take effect
      await this.$nextTick(function() {
        this.colorFilter = "Black";
      });

      await this.$nextTick(function() {
        // Doesnt hurt to zero out filters on change
        this.colorFilter = "";
      });
    }
  }
};
</script>

Xin lỗi các bạn, ngoại trừ phương pháp tải lại trang (nhấp nháy), không ai trong số họ làm việc cho tôi (: key không hoạt động).

và tôi đã tìm thấy phương pháp này từ diễn đàn vue.js cũ hoạt động với tôi:

https://github.com/vuejs/Discussion/issues/356

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {show:true}
        },
        methods:{
            rerender(){
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                    console.log('re-render start')
                    this.$nextTick(() => {
                        console.log('re-render end')
                    })
                })
            }
        }
    }
</script>