Vue文件Template Syntax時想到的一個到另一個的問題

C0deTrash發表於2017-02-23
Vue

測試Vue版本為2.x版本
構造一個a標籤，利用v-on指令改變其url，具體程式碼如下：
HTML code：

<a v-bind:href=“url” v-on:click=“doSomething”></a>

Vue.js code：

let app = new Vue({
    el: ‘#app’,
    data: {
        url: ‘http://www.google.com`
    },
    methods: {
        doSomething: function(){
            console.log(‘Before click ‘ + this.url);
            this.url = ‘http://www.bing.com`;
            console.log(‘After click ‘ + this.url);
        }
    }
});

通過執行，發現在Chrome和Safari中執行，會先列印console值，然後再執行跳轉，而且跳轉的連結為改變後的URL；但是在Firefox中發現，它會直接執行跳轉，不會做console.(注意Safari目前不支援let語法)

由於其他兩個核心框架都可以看見console結果，僅Firefox框架無法看見，猜測可能是Firefox的console做了什麼處理！！
接下來利用下面程式碼禁用a標籤的自跳轉

let links = document.querySelectorAll(‘a’);
links[0].addEventListener(‘click’, function(e){
    e.preventDefault();
});

或者使用下面方法來禁止a標籤的跳轉

v-on:click.prevent="doSomething"

實際執行後發現，三個核心框架都在console中得到了相同的執行結果，而且頁面上的URL也被同步的修改了。由此至少可以推斷，三個核心框架執行Vue的邏輯是一樣的，至於為什麼Firefox看不到console內容，不太瞭解。

接下來就是比較關鍵的問題了，為什麼Chrome和Safari會執行修改後的URL，而Firefox會執行修改前的URL？
首先，不用Vue框架測試一下，是不是瀏覽器的差異。在頁面中放置一個a標籤，利用DOM去修改href值

<a id="test" href="https://www.baidu.com" onclick="doSomething()">https://www.baidu.com</a>
<script type="text/javascript">
    function doSomething(){
        let link = document.getElementById(`test`);
        link.href = `http://cn.bing.com`;
    }
</script>

經過測試發現，三個瀏覽器都執行了修改後的連結。那是不是Vue處理的時候做了什麼不一樣的東西導致了Firefox那麼怪異的行為嗎？
進一步的排除瀏覽器差異性的問題，現在修改Vue的那段程式碼裡面doSomething()的程式碼，修改為

doSomething: function(){
    let links = document.getElementsByTagName(`a`);
    links[0].href = `http://cn.bing.com`;
}

執行後發現是那個瀏覽器的執行結果也是一樣的，那這麼說，應該就是原來利用 this.href 賦值新的訪問地址框架與瀏覽器執行先後的問題了？

相關文章