Vue.js知識點雜記

渲染

深入式響應--頁面監聽對象或數組型的數據變化,簡單的設置某個元素的的值是無效的,要使用push等變異方法,或者使用vue.$set()

nextTick--DOM發生變化後會執行寫入的回調函數

父子組件傳值

子傳給父--this.$emit()觸發事件,傳遞數據

父傳給子--如果是一個對象的話,在父組件的data裏要把對象的屬性都要聲明出來,不然在子組件是渲染不出來的,
同時屬性要初始化

prop值修改問題--不要輕易修改組件中prop的值(它是用來父組件傳值給子組件,隨意修改會影響其在父組件裏的數據混亂)對於引入類型的數據如數組和對象來說,它們的值則是數據的地址。這是要區分開來的。

對prop進行“雙向綁定”--在一個包含prop的子組件中,用this.$emit('update:title', newTitle)來表達對其賦新值的意圖。然後在父組件中可以監聽那個事件並更新一個本地的數據屬性
<text-document v-bind:title.sync="doc.title"></text-document>

路由

路由前置守衛--想要結束路由守衛,整段代碼的邏輯必須有next()進行結尾。

this.$route--定位到了當前路由的對象,可以獲取到query、params、name、path等信息
this$router爲VueRouter實例,通過push、replace等函數實現了路由的跳轉

watch監聽

watch失效問題--監聽對象,要加一個配置 deep: true
因爲對象的值是一個引用,我們改變對象屬性的值的時候,改變的不是這個對象的引用,因此監聽不到

watch中oldVal對於深度監聽對象是無效的,其實對於oldValue的值和newValue的值等同這種現象是合理的,因爲都指向了同一個引用,值當然是一樣的

其他

混入--分發vue組件中可複用的功能,混入組件的意思是,其他組件可以使用被混入組件的計算屬性

template--語義化標籤,把它當做不可見的包裹元素,最後不會渲染出來,一般用於插槽,v-if渲染和v-for渲染

在computed的方法內如傳遞參數--使用閉包

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章