Vue.js常見(jiàn)問(wèn)題總結(jié)

(原網(wǎng)址:http://blog.csdn.net/stronger_lxs/article/details/51321470)

1漏隐、響應(yīng)式屬性和方法

每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性囚玫。

var?? data={ a:1}

var?? vm=new ? Vue({data:data})??

vm.a===data.a??????????? // -> true

//設(shè)置屬性也會(huì)影響到原始數(shù)據(jù)

vm.a=2

data.a?????????????? // -> 2

// ... 反之亦然

data.a=3

vm.a????????????????? // -> 3

即:都可以使vm.xxx這種方式獲取和修改實(shí)例屬性臂聋。

注意:

注意只有這些被代理的屬性是響應(yīng)的晕窑。如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上话侄,它不會(huì)觸發(fā)視圖更新闹获。我們將在后面詳細(xì)討論響應(yīng)系統(tǒng)。

那么這種情況的話仁连,可以使用VueJs的vm.$xxx的方式來(lái)修改實(shí)例屬性蓝角,這同樣會(huì)觸發(fā)視圖更新阱穗,響應(yīng)式的改變饭冬。

2.生命周期鉤子

生命周期鉤子包括createdbeforeCompile揪阶、compiled昌抠、readybeforeDestroy鲁僚、destroyed

鉤子的 this 指向調(diào)用它的 Vue 實(shí)例

我們可以在鉤子的方法中使用this來(lái)指代當(dāng)前實(shí)例炊苫。Vuejs中沒(méi)有控制器的概念裁厅,組件的自定義邏輯可以分割在這些鉤子里面。


3.插值
單詞插值侨艾,只有在第一次渲染時(shí)候渲染值执虹,之后不會(huì)隨實(shí)例屬性值的變化而改變,如:

<span>單詞插值:{{*msg}}</span>

插入原始HTML唠梨,這種方式內(nèi)容以 HTML 字符串插入袋励,數(shù)據(jù)綁定將被忽略,如:

<div>{{{raw_html}}}</div>

如果需要復(fù)用模板片斷当叭,應(yīng)當(dāng)使用partials

注意:

在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML 是非常危險(xiǎn)的茬故,因?yàn)槿菀讓?dǎo)致 XSS 攻擊。記住蚁鳖,只對(duì)可信內(nèi)容使用 HTML 插值磺芭,永不用于用戶提交的內(nèi)容。

4.v-show 和 v-if的選擇

v-if 也是惰性的:如果在初始渲染時(shí)條件為假醉箕,則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯(編譯會(huì)被緩存起來(lái))钾腺。

相比之下,v-show 簡(jiǎn)單得多——元素始終被編譯并保留讥裤,只是簡(jiǎn)單地基于 CSS 切換垮庐。

5.使用track-by,優(yōu)化列表循環(huán)

因?yàn)?v-for 默認(rèn)通過(guò)數(shù)據(jù)對(duì)象的特征來(lái)決定對(duì)已有作用域和 DOM

元素的復(fù)用程度坞琴,這可能導(dǎo)致重新渲染整個(gè)列表哨查。但是,如果每個(gè)對(duì)象都有一個(gè)唯一 ID 的屬性剧辐,便可以使用 track-by 特性給 Vue.js

一個(gè)提示寒亥,Vue.js 因而能盡可能地復(fù)用已有實(shí)例。

例如荧关,假定數(shù)據(jù)為:

{? items: [? { _uid:'88f869d',...},? ? { _uid:'7496c10',...}? ]}

然后可以這樣給出提示:

<div?? v-for="item in items"??? track-by="_uid">

</div>

然后在替換數(shù)組 items 時(shí)溉奕,如果 Vue.js 遇到一個(gè)包含 _uid: ‘88f869d’ 的新對(duì)象,它知道它可以復(fù)用這個(gè)已有對(duì)象的作用域與 DOM 元素忍啤。

6.prop數(shù)據(jù)綁定)=

prop 默認(rèn)是單向綁定:當(dāng)父組件的屬性變化時(shí)加勤,將傳導(dǎo)給子組件,但是反過(guò)來(lái)不會(huì)同波。這是為了防止子組件無(wú)意修改了父組件的狀態(tài)——這會(huì)讓應(yīng)用的數(shù)據(jù)流難以理解鳄梅。

解決辦法: 使用.sync.once綁定修飾符顯式地強(qiáng)制雙向或單次綁定

1.默認(rèn)為單向綁定

<child :msg="parentMsg"></child>

2.雙向綁定

<child? ? :msg.sync="parentMsg"></child>

3.單次綁定

<child? ? :msg.once="parentMsg"></child>

7、組件的父鏈

子組件可以用this.$parent訪問(wèn)它的父組件未檩。根實(shí)例的后代可以用this.$root訪問(wèn)它戴尸。父組件有一個(gè)數(shù)組this.$children,包含它所有的子元素冤狡。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末孙蒙,一起剝皮案震驚了整個(gè)濱河市项棠,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌挎峦,老刑警劉巖香追,帶你破解...
    沈念sama閱讀 219,427評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異坦胶,居然都是意外死亡翅阵,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門迁央,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)掷匠,“玉大人,你說(shuō)我怎么就攤上這事岖圈《镉铮” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,747評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵蜂科,是天一觀的道長(zhǎng)顽决。 經(jīng)常有香客問(wèn)我,道長(zhǎng)导匣,這世上最難降的妖魔是什么才菠? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,939評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮贡定,結(jié)果婚禮上赋访,老公的妹妹穿的比我還像新娘。我一直安慰自己缓待,他們只是感情好蚓耽,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著旋炒,像睡著了一般步悠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上瘫镇,一...
    開(kāi)封第一講書(shū)人閱讀 51,737評(píng)論 1 305
  • 那天鼎兽,我揣著相機(jī)與錄音,去河邊找鬼铣除。 笑死谚咬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的通孽。 我是一名探鬼主播序宦,決...
    沈念sama閱讀 40,448評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼睁壁,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼背苦!你這毒婦竟也來(lái)了互捌?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,352評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤行剂,失蹤者是張志新(化名)和其女友劉穎秕噪,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體厚宰,經(jīng)...
    沈念sama閱讀 45,834評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡腌巾,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了铲觉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片澈蝙。...
    茶點(diǎn)故事閱讀 40,133評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖撵幽,靈堂內(nèi)的尸體忽然破棺而出灯荧,到底是詐尸還是另有隱情,我是刑警寧澤盐杂,帶...
    沈念sama閱讀 35,815評(píng)論 5 346
  • 正文 年R本政府宣布逗载,位于F島的核電站,受9級(jí)特大地震影響链烈,放射性物質(zhì)發(fā)生泄漏厉斟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評(píng)論 3 331
  • 文/蒙蒙 一强衡、第九天 我趴在偏房一處隱蔽的房頂上張望擦秽。 院中可真熱鬧,春花似錦漩勤、人聲如沸号涯。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,022評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)链快。三九已至,卻和暖如春眉尸,著一層夾襖步出監(jiān)牢的瞬間域蜗,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,147評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工噪猾, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留霉祸,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,398評(píng)論 3 373
  • 正文 我出身青樓袱蜡,卻偏偏與公主長(zhǎng)得像丝蹭,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子坪蚁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容