测试Vue版本为2.x版本

构造一个a标签，利用v-on指令改变其url，具体代码如下：HTML code：

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值

https://www.baidu.com

经过测试发现，三个浏览器都执行了修改后的链接。那是不是Vue处理的时候做了什么不一样的东西导致了Firefox那么怪异的行为吗？

进一步的排除浏览器差异性的问题，现在修改Vue的那段代码里面doSomething()的代码，修改为

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

执行后发现是那个浏览器的执行结果也是一样的，那这么说，应该就是原来利用 this.href 赋值新的访问地址框架与浏览器执行先后的问题了？