3 回答

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊
通俗來(lái)講,
computed是在HTML DOM加載后馬上執(zhí)行的,如賦值;
而methods則必須要有一定的觸發(fā)條件才能執(zhí)行,如點(diǎn)擊事件;
watch呢?它用于觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng)。對(duì)應(yīng)一個(gè)對(duì)象,鍵是觀察表達(dá)式,值是對(duì)應(yīng)回調(diào)。值也可以是方法名,或者是對(duì)象,包含選項(xiàng)。
所以他們的執(zhí)行順序?yàn)椋耗J(rèn)加載的時(shí)候先computed再watch,不執(zhí)行methods;等觸發(fā)某一事件后,則是:先methods再watch。
下面的例子可以做為說(shuō)明。
computed 屬性 vs watched 屬性:Vue 確實(shí)提供了一種更通用的方式來(lái)觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng):watch 屬性。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí),你很容易濫用 watch——特別是如果你之前使用過(guò) AngularJS。然而,通常更好的想法是使用 computed 屬性而不是命令式的 watch 回調(diào)。

TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊
1、methods是個(gè)方法,比如你點(diǎn)擊事件要執(zhí)行一個(gè)方法,這時(shí)候就用methods,
2、computed是計(jì)算屬性,實(shí)時(shí)響應(yīng)的,比如你要根據(jù)data里一個(gè)值隨時(shí)變化做出一些處理,就用computed。
3、舉一個(gè)例子幫助理解:
1)<div id="root">;
2) </div>;
3) <script> var vm = new Vue({ el: '#root', data:data, methods:{
4)method_now(){ return Date.now();} },
5)computed:{
6)computed_now: function () { return Date.now();}} })
7)</script>
4、控制臺(tái)訪問(wèn):
1)$vm0.computed_now;
2)1491741921719$vm0.computed_now;
3)1491741921719$vm0.computed_now;
4)1491741921719$vm0.computed_now;
5)1491741921719$vm0.method_now;
6)()1491741949941$vm0.method_now;
7)()1491741950734$vm0.method_now;
8)()1491741951445$vm0.method_now;
9)()1491741952117。
5、methods是方法和原生js沒(méi)區(qū)別,大多是需要我們主動(dòng)調(diào)用(比如事件)。
6、computed是get 這個(gè)get有點(diǎn)特殊,只要觸發(fā)所依賴數(shù)據(jù)的set會(huì)自動(dòng)觸發(fā)get。我們只關(guān)心get的return set由系統(tǒng)觸發(fā)或者依賴的數(shù)據(jù)觸發(fā),官方說(shuō)依賴緩存只是為了理解。其實(shí)Date.now()這種只是系統(tǒng)不能觸發(fā)set,不能觸發(fā)set get當(dāng)然不會(huì)通知觀察者。
7、watch 是set 由data觸發(fā),我們可以在set里進(jìn)行自己的條件封裝。
添加回答
舉報(bào)