Vue.set 的副作用

文章预览

Vue虽然用挺久了，还是会踩到坑，来看下面这段很简单的🌰： 点击a和b按钮，下面代码会提示什么？ < html > < head > < meta charset = "utf-8" > < script src = "https://cdn.staticfile.org/vue/2.5.17/vue.min.js" > script > head > < body > < div id = "app" > < p > {{ JSON.stringify(this.testObj) }} p > < button @ click = "set('a')" > 设置testObj属性a button > < button @ click = "set('b')" > 设置testObj属性b button > div > < script > new Vue({ el : '#app' , data : { testObj : {}, }, watch : { 'testObj.a' () { alert( 'a' ) }, 'testObj.b' () { alert( 'b' ) }, }, methods : { set (val) { Vue.set( this .testObj, val, {}); } }, }) script > body > html > 答案是： 点a的时候alert a， ………………………………