vue 生命周期有哪些
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
初始化請求數據在那個生命鈎子里
// 最好放到 created 鈎子里，在頁面沒有渲染之前
mounted
// mounted 鈎子，是在dom 渲染完成后調用的鈎子，當需要dom 加載完成后執行的操作，需要放到 該鈎子函數中
activated deactivated
// 重復進出緩存組件的同時，需要做一下操作時很有用
activated 激活該組件時調用，初次進入也是調用，只要激活該組件
deactivated 組件失活時調用
父子組件渲染過程
----父子組件加載過程----
//父beforeCreate => 父created => beforeMount => 子 beforeCreate => 子created => 子beforeMounted => 子mounted => 父mounted
----父子組件更新過程----
// 父beforeUpdate => 子 beforeUpdate => 子updated => 父updated
----父子組件銷毀過程----
// 父beforeDestroy => 子beforeDestroy => 子destroyed => 父destroyed
父組件怎么監聽子組件的生命周期(兩種方法)
方法一
// 自定義事件，當觸發子組件對應的生命鈎子函數時，通過$emit 通知父組件
-----------------------父組件-----------------
<template>
<div>
<child @gouzi="gouzi"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name:'parent',
components:{
child
},
methods：{
gouzi(val) {
console.log(val)
}
}
}
---------子組件-----
<template>
<div>
<el-button @click="add">增加金額</el-button>
</div>
</template>
<script>
export default {
name:'child',
mounted() {
this.$emit('gouzi','子組件的mounted 鈎子')
}
}
</script>
方法二
// 通過 hook 方法監聽子組件的鈎子函數,以監聽子組件 mounted 鈎子為例
-----------------------父組件-----------------
<template>
<div>
<child @hook:mounted="doCallback"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name:'parent',
components:{
child
},
methods：{
doCallback() {
console.log('監聽子組件 鈎子函數 的回調')
}
}
}
---------子組件-----
<template>
<div>
子組件
</div>
</template>
<script>
export default {
name:'child',
mounted() {
console.log('子組件 mounted 鈎子')
}
}
// 子組件 mounted 鈎子
// 監聽子組件 鈎子函數 的回調
</script>
vue 常用的指令
v-if
v-show
v-model
v-on
v-bind
v-for
v-slot
v-if v-show 的區別
兩者都是有隱藏的功能，區別如下
v-if 是dom元素的插入和刪除
v-show 是dom元素的顯示和隱藏，操作的css樣式 display:none/block
vue 父子組件傳值的方法有幾種
父子組件傳值
1，父組件通過 prop 傳值，子組件通過 $emit 向父組件 傳值
2，通過v-model value input 傳值（看下面示例）
3，通過 update sync 進行傳值（看下面示例）
4，通過事件總線eveBus
5，直接操作子組件的數據 子組件通過$parent 向父組件傳值
6, vuex
// 通過v-model 進行父子組件之間的傳值
// v-model 就是一個語法糖 父組件通過默認屬性 value傳值，子組件通過默認事件 input 向父組件傳值
-----------------------父組件-----------------
<template>
<div>
<model v-model="price"></model>
</div>
</template>
<script>
import model from './model.vue'
export default {
name:'parent',
components:{
model
}
}
---------子組件-----
<template>
<div>
<el-button @click="add">增加金額</el-button>
</div>
</template>
<script>
export default {
name:'child',
props: ['value'], // 接受值 value
methods: {
add() {
this.$emit('input', '我是子組件傳的值') // 通過默認時間 input 向父組件傳值
}
}
}
</script>
// sync update 配合使用
<template>
<div>
<atest :dialogVisible.sync="dialogVisible"></atest>
<button @click="open">顯示 彈框 {{ dialogVisible }}</button>
</div>
</template>
<script>
import atest from './atest.vue'
export default {
name:'parent',
components:{
atest
},
data(){
return{
dialogVisible: false
}
},
methods: {
open () {
this.dialogVisible = !this.dialogVisible
}
}
}
------子組件----
<template>
<div>
<span v-if='dialogVisible'>
<el-button @click="close">取 消</el-button>
</span>
</div>
</template>
<script>
export default {
name:'child',
props: ['dialogVisible'],
methods: {
close() {
this.$emit('update:dialogVisible', false)
}
}
}
</script>
vue 組件跨代傳值（爺孫組件及更深層組件）的方法
1. $attr $listeners（看示例）
2, provide/inject。（看示例）
3，通過事件總線eveBus
4，直接操作子組件的數據 子組件通過$parent 向父組件傳值
5, vuex
$attr $listeners 組件跨代傳值
// 父組件
<template>
<div>
<child :price="price" :from='from' :num='num' @upRocket="reciveRocket"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name:'parent',
components:{
model
},
data() {
return {
// child 組件接受的參數
from:{
name:'wg',
age:18
},
price:200,
num:2
}
},
methods:{
// 要傳遞的函數
reciveRocket () {
console.log("reciveRocket success")
}
}
}
// 子組件
<template>
<div class="a">
<div>子組件</div>
<grandson :pageNum='pageNum' :pageSize='pageSize' v-bind="$attrs" v-on="$listeners"></grandson>
</div>
</template>
<script>
import grandson from './grandson.vue'
export default {
name: 'child',
props: ['from'], // 通過props 接受一個from
components: {
grandson
},
data () {
return {
pageNum:1,
pageSize:10
}
},
mounted() {
console.log(this.$attr,'attr')
console.log(this.$listeners,'listeners')
// price num 'attr' （父組件傳進來 from price num, 子組件通過props 接受了 from, $attr 就剩下 price num）
// upRocket 'listeners' 父組件定義的函數
},
methods: {
}
}
</script>
// 孫子組件
<template>
<div class="grandson">
<div>孫子組件</div>
<button></button>
</div>
</template>
<script>
export default {
name: 'grandson',
components: {
grandson
},
data () {
return {
}
},
mounted() {
console.log(this.$attr,'attr')
console.log(this.$listeners,'listeners')
// pageNum pageSize price num 'attr' => attr 接受除props 接受的外的 所有屬性
// upRocket 'listeners' 接受父組件綁定的函數，（父組件直接綁定的爺組件定義的函數）
},
methods: {
}
}
</script>
如果跨代很多，$attr $listeners就會有點太繁瑣，可以考慮 provide/inject
父組件通過 provide傳值， 子組件 通過 inject 接受值，不過不是響應式的，具體參考官網（詳細）點擊這里
// 父級組件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子組件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
兄弟組件傳值
// 1,eventBus
// 2,vuex
// 實際開發中，更傾向於子組件通過$emit 觸發父組件函數，父組件再改變值傳給 兄弟組件
watch computed 有什么區別
1. 當一個對象改變需要做一些邏輯處理或者開銷比較大的時候，考慮使用watch
2. 當多個變量都會對某一個產品影響時，考慮使用 computed
$set 什么用途
// vue2.0 中，數據視圖響應式是根據 Object.defineProperty 劫持屬性的getter和setter 結合發布訂閱者模式實現的，新加的屬性實現響應，要用$set 對該屬性進項劫持才能實現響應式
怎么緩存組件或者頁面
// 用keep-alive，進行緩存，（不需要重新創建卸載 => 緩存）
路由有哪幾種模式
// 瀏覽器端 hash 模式 history模式， 服務端 Abstract 模式，主要介紹瀏覽器端
// hash 變現為 url路徑有#，原理是 通過監聽 hashChange 進行路由的轉換
// history 是Html5 新加的 History模式，原理是通過監聽 pushState popState replaceState 進行路由的轉換
路由傳參有那些方式 三種方法
// 動態路由 路由表中配置占位符
{
path: '/list/:id',
name: 'list',
component:list
}
// 通過 push 跳轉
this.$router.push({
path: `/particulars/${id}`,
})
// 通過 this.$route.params.id 取參
// path 方法傳參
this.$router.push({
path: '/list',
query: {
name: 'wg'
}
})
// 通過 this.$route.query.name 取參
// name 方法傳參
this.$router.push({
name: 'list',
params: {
age: '18'
}
})
// 通過 this.$route.params.age 取參
路由懶加載有幾種 兩種 require import
// require 方式
{
path: '/about',
name: 'About',
component: resolve => require(['../pages/About.vue'], resolve)
}
// import 方式
{
path: '/HelloWorld',
name: 'HelloWorld',
component: () => import("@/components/HelloWorld") // @ 通過webpack 配置，默認 指向src 文件
}
vuex 有那幾個模塊組成
// state 定義變量
// getters 派生狀態 類似於計算屬性
// mutations 改變 store 中的狀態
// actions 主要操作異步操作，在組件中通過 this.$store.dispatch('xxx') 去觸發actions方法
// modules 把store 分為細小的模塊，應用於復雜的模塊
mutations 和 actions 的區別
// mutations 主要用於同步操作 store.commit('xxx') 觸發
// actions 主要用於異步操作 store.dispatch('xxx') 觸發actions, actions 在通過觸發 mutations 更改 state狀態
怎么解決 vuex 刷新數據丟失的問題
// 把數據存到 sessionStorage中，當頁面刷新時 store的初始值 從 sessionStorage中取
// 其關鍵點在於 把store的值什么時候存到 sessionStorage中，建議是 當頁面刷新之前，可以再入口app.vue組件created鈎子中 添加監聽 beforeunload 進行處理賦值
最后一個 vue2.0 中 雙向綁定的原理 （基礎版）
// vue通過 Object.defineProperty 劫持data中各個屬性的getter和setter,結合發布訂閱者模式 進行數據和視圖的響應
