VueJs常見問題總結

2021-07-11 14:52:13 字數 2355 閱讀 2829

1、響應式屬性和方法

每個 vue 例項都會**其 data 物件裡所有的屬性。

var

data

= var vm =

new vue()

vm.a ===

data

.a // -> true

// 設定屬性也會影響到原始資料

vm.a =

2data

.a // -> 2

// ... 反之亦然

data

.a =

3 vm.a // -> 3

即:都可以使vm.***這種方式獲取和修改例項屬性。

注意:

注意只有這些被**的屬性是響應的。如果在例項建立之後新增新的屬性到例項上,它不會觸發檢視更新。我們將在後面詳細討論響應系統。

那麼這種情況的話,可以使用vuejs的vm.$***的方式來修改例項屬性,這同樣會觸發檢視更新,響應式的改變。

2、生命週期鉤子

生命週期鉤子包括createdbeforecompilecompiledreadybeforedestroydestroyed

鉤子的 this 指向呼叫它的 vue 例項

我們可以在鉤子的方法中使用this來指代當前例項。vuejs中沒有控制器的概念,元件的自定義邏輯可以分割在這些鉤子裡面。

3、插值

單詞插值,只有在第一次渲染時候渲染值,之後不會隨例項屬性值的變化而改變,如:

單詞插值: 

}span>

插入原始html,這種方式內容以 html 字串插入,資料繫結將被忽略,如:

}}div>

如果需要復用模板片斷,應當使用 partials

注意:

在**上動態渲染任意 html 是非常危險的,因為容易導致 xss 攻擊。記住,只對可信內容使用 html 插值,永不用於使用者提交的內容。

4、v-show 和 v-if的選擇
v-if 也是惰性的:如果在初始渲染時條件為假,則什麼也不做——在條件第一次變為真時才開始區域性編譯(編譯會被快取起來)。

相比之下,v-show 簡單得多——元素始終被編譯並保留,只是簡單地基於 css 切換。

5、使用track-by,優化列表迴圈
因為 v-for 預設通過資料物件的特徵來決定對已有作用域和 dom 元素的復用程度,這可能導致重新渲染整個列表。但是,如果每個物件都有乙個唯一 id 的屬性,便可以使用 track-by 特性給 vue.js 乙個提示,vue.js 因而能盡可能地復用已有例項。

例如,假定資料為:

,

]}

v-for="item in items"

track-by="_uid">

div>

然後在替換陣列 items 時,如果 vue.js 遇到乙個包含 _uid: 『88f869d』 的新物件,它知道它可以復用這個已有物件的作用域與 dom 元素。

6、prop資料繫結)=

prop 預設是單向繫結:當父元件的屬性變化時,將傳導給子元件,但是反過來不會。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。

解決辦法: 使用.sync.once繫結修飾符顯式地強制雙向或單次繫結

:msg="parentmsg">

child>

:msg.sync="parentmsg">

child>

:msg.once="parentmsg">

child>

7、元件的父鏈
子元件可以用this.$parent訪問它的父元件。根例項的後代可以用this.$root訪問它。父元件有乙個陣列this.$children,包含它所有的子元素。

spring boot常見問題總結

1.今天在配置spring boot入門程式的時候發現乙個問題 controller失效 即配置了 controller類,卻不能訪問到 解決這個問題也是耗費了不少時間,其實應該早點就要想到的,因為在springmvc中對於 controller註解的類是需要component scan來配置的,同...

hibernate常見問題總結

1 hibernate 五大核心介面 答 1 configuration,此介面是用於載入hibernate.cfg.xml配置檔案,然後建立會話工廠 2 sessionfactory,此介面是會話工廠,是執行緒安全的,意味著它的同乙個例項可以被應 用的多個執行緒共享,是重量 級 二級快取 一般情況...

elasticsearch常見問題總結

原因 主要是linux的版本過低 解決方案 重新安裝新版本的linux系統 原因 無法建立本地檔案問題,使用者最大可建立檔案數太小 解決方案 切換到root使用者,編輯limits.conf配置檔案,新增類似如下內容 vi etc security limits.conf 新增如下內容 soft n...