1. v-for 與v-if的優先級
- 顯然v-for優先於v-i被解析(源碼說的清楚)
- 如果同時出現，每次渲染都會先執行循環再判斷條件，無論如何循環都不可避免，浪費了性能
- 要避免出現這種情況，則在外層嵌套template, 在這一層進行v-if判斷, 然後在內部進行v-for循環
2. 組件之間的傳值
2.1.1 父組件向子組件傳值
- 1.父組件調用子組件的時候 綁定動態屬性
<v-header :title="title"></v-header> - 2.在子組件有props接收父組件傳遞過來的數據
- 3.可以傳遞屬性,方法,實例,在子組件中直接使用
2.1.2 子組件主動獲取父組件的屬性和方法
子組件直接通過this.$parent.數據``this.$parent.方法
2. 2 子組件向父組件傳值
2.2.1 父組件主動獲取子組件的數據和方法
- 調用子組件的時候定義一個ref
<v-header ref="header"></v-header> - 在父組件裏面通過
this.$refs.header.屬性 this.$refs.header.方法
2.2.2 子組件自定義事件向父組件傳值
子組件:
this. $emit("自定義事件名稱" ,要傳的數據) ;
父組件:
<Header @childInput= ' getVal '></Header>
methods:{
getVal(msg){
/ /msg就是，
子組件傳遞的數據
}
}
子組件
<template>
<div>
父組件傳遞過來的: {{this.$parent.msg}}
<!-- 定義一個子組件傳值的方法 -->
<input type="button" value="點擊觸發" @click="childClick">
</div>
</template>
<script>
export default {
props:{
msg:String
},
data () {
return {
childValue:"我是一個子組件的值"
}
},
methods: {
childClick () {
this.$emit('childClick',this.childValue)
}
}
}
</script>
父組件
<template>
<div>
我的名字是
<!-- 子組件 -->
<!-- <child :msg="name"></child> -->
<!-- 引入子組件 定義一個on的方法監聽子組件的狀態-->
<!-- 點擊子組件按鈕,將子組件的數據顯示在父組件上 -->
<!-- 自定義事件的名稱要與子組件$emit的一致 -->
<child @childClick="childByValue"></child>
{{name}}
</div>
</template>
<script>
import Child from './Child'
export default {
data() {
return {
name:"pz",
msg:"父組件數據"
}
},
components: {
child:Child
},
methods: {
childByValue(childValue) {
// childValue就是子組件傳過來的值
this.name = childValue
}
}
}
</script>
2.3 兄弟組件之間的傳值
（非父子組件之間傳值，需要定義個公共的公共實例文件bus.js，作爲中間倉庫來傳值，不然路由組件之間達不到傳值的效果。）
公共bus.js
import Vue from 'vue'
export default new Vue()
組件A：
<template>
<div>
A組件:
<span>{{elementValue}}</span>
<input type="button" value="點擊觸發" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug，來做爲中間傳達的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
組件B：
<template>
<div>
B組件:
<input type="button" value="點擊觸發" @click="getData">
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件來接收參數
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
3. key的作用
作用:只要是爲了更高效的更新虛擬dom
diff算法 虛擬dom
如果節點類型不同,直接幹掉前面所有的節點,再創建並插入新的節點,不會再比較這個節點之後的節點
如果節點類型相同,會重新設置節點的屬性,從而實現節點的更新,
使用key會給每一個節點作爲一個標識,diff算法就可以正確的識別此節點,並可以找到新的位置插入節點
4. v-if v-show 區別
- v-if是“真正的”條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
- v-if也是惰性的:如果在初始渲染時條件爲假，則什麼也不做一直到條件第一次變爲真時， 纔會開始渲染條件塊。
- 相比之下，v-show 就簡單得多一-不管初始條件 是什麼元素總是會被渲染，並且只是簡單地基於CSS進行切換。
- 一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好;如果在運行時條件不太可能改變，則使用v-if 較好。
5. 如何讓css只在當前組件中起作用
<style scope> </style>
拓展:如何改變引入第三方組件的樣式???比如引入了swiper,要改變分頁小圓點的樣式演示用到sass的樣式穿透:父元素 /deep/ 子元素
<style lang="sass" scope>
.swiper-pagination /deep/ .swiper-pagination-bullet-active {
background:red;
}
</style>
6. 解決移動端時間處理300ms延遲的問題
- 下載
npm install fastclick - 引入
import FastClick from ’ fastclick’
FastClick。attach ( document. body);
7. vue-loader用途
vue-loader 是文件加載器,跟template/js/style裝換成js模塊
用途: js可以寫es6 css可以是使用less sass
8. NextTick是做什麼的
說明 :
$ nextTick是在下次DOM更新循環結束之後執行延遲迴調,在修改函數之後使用$nextTick,則可以在回調中獲取更新後的DOM
場景 : 在視圖更新之後基於新的視圖進行操作
9. 爲什麼腳手架中的data是返回一個函數
因爲JS本身的特性帶來的，如果data是一個對象，那麼由於對象本身屬於引用類型，當我們修改其中的一個屬性時，會影響到所有Vue實例的數據。如果將data作爲一個函數返回一個對象，那麼每一個實例的data屬性都是獨立的，不會相互影響了。
10. keep-alive的理解
定義:他是一個內置的組件,他能在組件切換過程中將轉態保存在內存中,防止重複渲染dom
說明 不會在dom樹中渲染
11. watch和 computed差異
- computed計算屬性是有data中的已知值得到一個新的值,性能不好, 別人的變化影響自己(被動)
- watch監聽data中的數據,監聽路由變化,我的變化影響別人(主動) 可以得到新的值和舊的值