鍍金池/ 問(wèn)答/Java  網(wǎng)絡(luò)安全  HTML/ vue實(shí)例中data函數(shù)里 this.examlpe 的數(shù)據(jù)和 return里的

vue實(shí)例中data函數(shù)里 this.examlpe 的數(shù)據(jù)和 return里的數(shù)據(jù) 有區(qū)別嗎？

vue實(shí)例中data函數(shù)里 this.examlpe 的數(shù)據(jù)和 return里的數(shù)據(jù) 有區(qū)別嗎？
以下data(){}中在this上屬性和 return 一個(gè)數(shù)據(jù) 有和不同？

{
//...
 data () {
    this.visible1 = null
    return {
      visible2: false,
      //...
    }
  },
}
回答
編輯回答
眼雜

一樓說(shuō)很清楚了

2018年2月18日 02:29
編輯回答
青裙

沒(méi)有，都是指向當(dāng)前vue實(shí)例

2018年9月2日 07:02
編輯回答
局外人

相同點(diǎn)：
都是vue 實(shí)例上的對(duì)象屬性，都可以通過(guò) this.visible1 或者 this.visible2 訪問(wèn)。
不同點(diǎn)：
this.visible2 也可以通過(guò) this.$data.visible2 訪問(wèn)。
實(shí)例創(chuàng)建之后，可以通過(guò) vm.$data 訪問(wèn)原始數(shù)據(jù)對(duì)象。Vue 實(shí)例也代理了 data 對(duì)象上所有的屬性，因此訪問(wèn) vm.visible2 等價(jià)于訪問(wèn) vm.$data.visible2 具體可以看這里

data 聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)，就不會(huì)被所有的實(shí)例將共享引用，所以每個(gè)組件中的數(shù)據(jù)，一般通過(guò) visible2 這樣定義。

2017年5月25日 08:21
編輯回答
亮瞎她

說(shuō)過(guò)更通俗的把，如果你通過(guò)在data里直接this.xxx定義，而不在return里定義的話，你在methods中修改這個(gè)值不會(huì)觸發(fā)視圖更新。視圖只會(huì)取到初始值。除非使用vue.set

2018年5月9日 14:59
編輯回答
澐染

謝邀

this.xxx 指向當(dāng)前實(shí)例對(duì)象 也就是最外層的new Vue 這個(gè)實(shí)例對(duì)象
而return 出來(lái)是當(dāng)前模板的信息 它掛載到該實(shí)例上

2018年1月4日 00:13
編輯回答
選擇
data(){
    return{
        test:123
    }
}

是將vue實(shí)例的數(shù)據(jù)以函數(shù)返回的形式來(lái)定義,防止組件間數(shù)據(jù)之間的互相影響。
官方解釋：

當(dāng)一個(gè)組件被定義， data 必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)，因?yàn)榻M件可能被用來(lái)創(chuàng)建多個(gè)實(shí)例。

在其他地方通過(guò)this.test來(lái)訪問(wèn)該組件所定義的數(shù)據(jù)test，其中this指向vue實(shí)例，后面就是定義的數(shù)據(jù)。

2017年12月30日 17:16