Vue文档Template Syntax时想到的一个到另一个的问题

测试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 赋值新的访问地址框架与浏览器执行先后的问题了？