Làm thế nào vuejs biết các depenedencies của tính tài sản cho bộ nhớ đệm?

Question

tôi có mã này Vue.js:

new Vue({ 
    data:{ 
     myValue:'x', 
     myOtherValue:'y' 
    }, 
    computed: { 
     myComputed: myFunction(){ 
      return this['my' + 'Value'] 
     } 
    } 
}) 

Như bạn có thể thấy các tài sản tính sẽ được lưu trữ và nó được dựa trên chỉ data.myValue. Câu hỏi của tôi là làm thế nào hệ thống bộ nhớ đệm Vue.js biết rằng chạy các chức năng tính toán một lần nữa chỉ khi myValue được thay đổi?

Nếu tôi thay đổi biến số myOtherValue, chức năng myComputed sẽ sử dụng bộ nhớ cache và sẽ không chạy lại được nữa.

Tôi đã nghĩ về một số cách có thể. Nhưng làm thế nào Vuejs làm điều đó? Tôi đã đọc bài viết này: https://vuejs.org/v2/guide/computed.html và không tìm thấy câu trả lời.

Và điều gì xảy ra trong mã này, điều gì sẽ được giải quyết?

const flag=2 
new Vue({ 
    data:{ 
     myValue:'x', 
     myOtherValue:'y' 
    }, 
    computed: { 
     myComputed: myFunction(){ 
      if (flag==1){ 
       return this['my' + 'Value'] 
      } 
      else 
       return this['my' + 'Other' + 'Value'] 
     } 
    } 
}) 

Bonus: tôi sẽ đánh giá cao tôi liên kết với các chức năng có liên quan trong các mã VueJS: https://github.com/vuejs/vue

Answer 1

Đó là hệ thống phản ứng của Vue.js, không phải là một hệ thống bộ nhớ đệm.

Dữ liệu trong một thành phần sẽ được chuyển thành getters và setters. Khi bạn truy cập một giá trị thông qua một getter, getter sẽ thêm nó vào các phụ thuộc, và khi bạn sửa đổi giá trị thông qua một setter, setter sẽ thông báo cho tất cả những người phụ thuộc vào giá trị.

Đây là mã nguồn, tất cả sự kỳ diệu sẽ xảy ra trong hàm này: https://github.com/vuejs/vue/blob/dev/src/core/observer/index.js#L131

Answer 2

Từ các tài liệu nó đọc rằng: tính Tính toán được lưu trữ, và chỉ lại tính vào những thay đổi phụ thuộc phản ứng. Tuy nhiên fiddle sau đây cho thấy một cái gì đó một chút khác nhau.

1. https://jsfiddle.net/z11fe07p/267/

Từ fiddle nếu bạn thiết lập các lá cờ để 2, tài sản tính sẽ được đánh giá lại và thực hiện nếu bạn thay đổi myOtherValue, tuy nhiên điều này sẽ không xảy ra nếu cờ được thiết lập để 1. Tôi nghĩ rằng nó theo dõi các điều kiện của bạn.

Trong tài liệu thường bạn có thể tìm thấy các liên kết đến mã nguồn có liên quan. Đây là mã đối với tài sản tính:

• https://github.com/search?utf8=%E2%9C%93&q=repo%3Avuejs%2Fvue+extension%3Ajs+%22computed%22&type=Code