Vuejs在数据绑定时会复制更新并替换目标元素

[susouth]

📚在线阅读:Vuejs在数据绑定时会复制更新并替换目标元素 - No.71

概述

Vuejs是一款簡單而強大的軟體傑作，類似其它流行的UI框架，Angularjs和Reactjs，但不像這兩者令人生畏的複雜性，Vue非常簡單，在從入門到放棄之前，你能很快掌握它的全部知識並投入生產。

但是如果你不知道它怎麼工作的，有時候它也會難為你。這裡是一個和其它UI框架(Framework7)衝突的例子。

<!-- index.html -->
<div class="pages">
  <div class="page" date-page="index">
    <!-- load a new page -->
    <a href="test.html">new page</a>
  </div>
</div>

<!-- test.html -->
<div class="pages">
  <div class="page" date-page="test" id="test">
    <div class="page-content" id="test1">
    <p>{% raw %}{{content}}{% endraw %}</p>
    </div>
  </div>
</div>

var myApp = new Framework7();
myApp.onPageInit('test', function (page) {
  new Vue({
    el: '#test',
    data: {
      content: 'hello world'
    }
  });
});

你可能會驚訝它竟然無法工作，新的page點擊後並沒有顯示出來。事實上，Vue內部會複製目標HTML元素，然後根據綁定的資料更新並替換原來的元素。當Framework7載入新的頁面時，它會調用PageInit回呼函數，這裡我們又調用了Vue在<page>元素上資料綁定，這之後DOM樹裡面包含的已經是新的<page>元素，但Framework7對此並不知情又接著在舊的<page>元素上完成剩下的初始化工作，比如最終顯示這個新的頁面，這就是根本原因。

為了繞過這個問題，不要讓Vue的元素選擇器錨定在<page>元素上，而是定在它的子元素，這樣Vue做資料綁定時就不會影響到整個頁面顯示。

var myApp = new Framework7();
myApp.onPageInit('test', function (page) {
  new Vue({
    el: '#test1',
    data: {
      content: 'hello world'
    }
  });
});

更多資訊

• Vue
• Vue教程
• Framework7
• Vue3.0 前的 TypeScript 最佳入门实践