(原網(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.生命周期鉤子
生命周期鉤子包括created、beforeCompile揪阶、compiled昌抠、ready、beforeDestroy鲁僚、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,包含它所有的子元素冤狡。