Vue實戰筆記

1、元件的屬性

例子：

class="

hello

props

name="

demo

"title="

我是title

title是原生屬性，當inheritattrs為false時，原生屬性不顯示

2、事件

3、插槽

4、如何觸發元件的更新

vue在例項化的時候，會對data裡的資料進行getter和setter的轉化（說白了就是對這個資料進行一層**，不管是獲取資料還是設定資料的值，都會經過這個**層，然後再去執行相應的操作），當我們在渲染元件的時候，

需要一些資料，如果這個資料用到了，就會把它放到watch裡，如果沒有用到，就不會進入這個watch

如果這個資料在watch中，當setter的時候，就會通知watch進行更新

5、計算屬性和watch

計算屬性依賴的資料，必須是響應式資料，就是data裡return的資料

computed能做的，watch都能做，反之則不行

能用computed做的，盡量用computed

6、生命週期

建立階段：在beforecreate之前，會執行乙個初始化，初始化事件和生命週期；created生命週期會進行data、props、watch、computed的初始化；beforemount模板編譯到render（如果直接編寫的是render，這部分會跳過），我們一般用

template，所以會把template編寫成render；然後就是render會生成虛擬dom，掛載到真實dom上，然後執行mounted

我們可以在mounted進行非同步請求、操作dom和定時器等，但是vue並不承諾mounted時候子元件也全部掛載好，所以我們需要this.$nexttick

updated生命週期，也不承諾子元件全部更新完成，所以需要this.$nexttick

在beforeupdate和updated生命週期中，千萬不能更改響應資料，不然會陷入死迴圈，一更改就觸發

向子元素或子元件傳遞特性和事件

可以用來編寫臨時變數

把var1和var2傳遞給這個函式式元件，然後直接返回，然後借助v-slot作用於插槽就可以使用var1、var2了

7、指令的本質是什麼？

就是乙個語法糖、標誌位，當在編譯階段，把template編譯成render函式的時候，會把這些語法糖編譯成js**，這也是為什麼jsx和render函式不支援內建指令的原因（jsx也在慢慢支援部分的指令，jsx也是個語法糖，也會編譯成render函式）

8、vue.observable( object )

讓乙個物件可響應。vue 內部會用它來處理data函式返回的物件。

9、template和jsx對比

在vue中,tremplate和jsx都是語法糖，最後都要轉換為createelement