創(chuàng)建一個(gè)實(shí)例

每個(gè)Vue應(yīng)用都是通過Vue函數(shù)創(chuàng)建一個(gè)新的Vue實(shí)例開始的：

數(shù)據(jù)與方法

當(dāng)Vue實(shí)例按照上述方式被創(chuàng)建時(shí)，Vue的響應(yīng)式系統(tǒng)中就加入了data對(duì)象，在使用中可以直接通過屬性的調(diào)用方式進(jìn)行使用，并且當(dāng)這些屬性值發(fā)生變化時(shí)，視圖層會(huì)實(shí)時(shí)響應(yīng)，自動(dòng)匹配更新為新的值。

響應(yīng)式：當(dāng)實(shí)例被創(chuàng)建時(shí)data中存在的屬性改變時(shí)，視圖才會(huì)進(jìn)行重新渲染。

所以，在創(chuàng)建Vue實(shí)例之外的地方添加新的屬性時(shí)，這些屬性并非響應(yīng)式，任何改動(dòng)都不會(huì)觸發(fā)視圖的重新渲染。所以，如果我們需要用到一些值，哪怕暫時(shí)性的不展示，也最好在創(chuàng)建實(shí)例時(shí)令它為空或null，設(shè)置一些相應(yīng)類型的初始值，比如：

例外： Object.freeze() 方法可以凍結(jié)一個(gè)對(duì)象，凍結(jié)指的是不能向這個(gè)對(duì)象添加新的屬性，這也意味著響應(yīng)系統(tǒng)無法再追蹤變化。如下：

除了數(shù)據(jù)屬性，Vue實(shí)例還暴露了一些有用的實(shí)例屬性與方法，他們都帶有前綴$，以便于用戶定義的屬性區(qū)分，例如：

在官網(wǎng)中可以查看更詳細(xì)具體的API教程。

實(shí)例生命周期鉤子(官網(wǎng)內(nèi)容，自我學(xué)習(xí)并使用)

每個(gè)Vue實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽watch、編譯模版、將實(shí)例掛載到DOM并在數(shù)據(jù)變化時(shí)更新DOM等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給予了用戶在不同階段添加自己代碼的機(jī)會(huì)。

比如created鉤子可以用來在一個(gè)實(shí)例被創(chuàng)建之后執(zhí)行代碼：

也有其他的鉤子，在生命周期的不同階段被調(diào)用，這個(gè)在后面做介紹。

生命周期鉤子的this上下文指向調(diào)用它的Vue實(shí)例。

警告??：不要再選項(xiàng)屬性或回調(diào)上使用箭頭函數(shù)(ES6)。因?yàn)榧^函數(shù)是和父級(jí)上下文綁定在一起的，在箭頭函數(shù)中使用this得不到你想要的結(jié)果，經(jīng)常導(dǎo)致類型錯(cuò)。

生命周期

下面介紹實(shí)例的生命周期，這里先做個(gè)內(nèi)容介紹，不需要一下子就懂，在后面不斷深入的學(xué)習(xí)和使用中，慢慢剖析和理解，理論與實(shí)踐相印證，這些價(jià)值會(huì)在未來體現(xiàn)出來。

生命周期是個(gè)非常重要的概念，要好好的理解和使用，同樣的過程，在React中也是類似的。

本人也是前端愛好者，最近在看VUE的官網(wǎng)教程，內(nèi)容中有很多是官網(wǎng)的指引，這些東西無法避免，我覺得官網(wǎng)的內(nèi)容很好，我自己總結(jié)和實(shí)踐去闡述自己的理解，并用自己的實(shí)戰(zhàn)代碼為大家展示出來。繼而配合官網(wǎng)的章節(jié)教程，自己的一些實(shí)踐也可以按照合理的學(xué)習(xí)路線走下去，希望知識(shí)不論在哪里都可以被合理地接受。

有意見和建議的朋友可以私信我，我會(huì)及時(shí)處理。

總結(jié)

以上是生活随笔為你收集整理的vue 箭头函数兼容性_前端学习计划之VUE学习（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。