一.生命周期
1.1 生命周期,执行顺序,父子组件生命周期执行顺序
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
父 beforeCreate created beforeMount
子 beforeCreate created beforeMount mounted
父 mounted
发送请求是在mounted 还是 created?
这个问题具体要看项目和业务的情况了,因为组件的加载顺序是,父组件引入了子组件, 那么先执行父的前3个生命周期,再执行子的前4个生命周期, 那么如果我们的业务是父组件引入子组件,并且优先加载子组件的数据, 那么在父组件中当前的请求要房mounted中,如果当前组件没有依赖关系那么放在哪个生命周期中请求都是可以的。
1.2 为什么请求不放在beforeCreate中,created和beforeCreate的区别?
此时无法通过vm访问到data和methods中的内容
created 有$data
beforeCreate 没有$data
created 可以访问methods中的方法
beforeCreated 不能访问methods中的方法
1.3 加入keep-alive会执行哪些生命周期
如果使用了keep-alive,当前组件会额外增加两个生命周期
activated
deactivated
如果当前组件加入keep-alive 第一次进入这个组件会执行5个生命周期:
beforeCreate
created
beforeMounted
mounted
activated
如果当前组件加入keep-alive 第二次或第N次进入会执行一个生命周期:
activated
二.关于组件
2.1 组件传值的方式
父传子
1.props接收
这种方式父传子很方便 但是父传孙不方便
子不能修改父组件的数据
2.子组件直接使用 this.$parent 获取父组件的属性
子可以直接修改父组件的数据
3. 依赖注入
优势:父组件可以直接向某个后代组件传值(不用逐级传递)
子传父
1.this.$emit
2.父组件直接使用 this.$refs 获取字组件的原型
兄弟传值
bus.js
2.2 父组件直接修改子组件的值
<List ref="child"></List>
this.$refs.child.xxx = xxx
2.3 子组件直接修改父组件的值
this.$parent.xxx
2.4 如何找到父组件,如何找到根组件
this.$parent,this.$root
2.5 keep-alive(缓存组件)
2.6 slot(插槽)
匿名插插
具名插槽
作用域插槽:传值
2.7 provide/inject(依赖注入)
三.关于vuex
3.1 vuex有哪些属性
state--->全局共享属性
getters--->针对state属性执行二次计算
mutations ---> 存放同步方法
actions ---> 存放异步方法的,并且是来提交mutations
modules ---> 将vuex再次进行模块划分
3.2 vuex使用state值
1.this.$store.state.xxx(**可以修改**)
2.辅助函数:mapState(**不可以修改,只读**)
3.3 vuex getters值修改(不能修改!) 问:input组件中如果v-model使用getters 会发生什么
3.4 vuex 中mutations和actions的区别
相同点:都是用来存放全局函数的,return值拿不到
不同点:mutations同步的
actions异步的,返回一个promise,可以执行相关异步操作
mutations是用来修改state的
actions是用来提交mutations的
3.5 vuex 持久化存储
vuex本身不是持久化存储,
实现持久化:1.自己写localStorage 2.插件vuex-persistedstate
四.关于路由
4.1 路由的模式和区别
1.表现形式不同:
hash:#
history:/
2.找不到当前页面的情况
history会给后端发送一个请求 hash不会
3.打包问题自测问题
history默认情况看不到内容
hash模式可以
4.2 子路由和动态路由
4.3 路由传值
4.4 导航故障
跳转当前页报错
方法:重写push
import VueRouter from "vue-router"
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
return routerPush.call(this, location).catch(error => error)
}
4.5 route的区别
$router:不仅包含当前路由还包含整个路由的属性和方法
$route:包含当前路由对象
4.6 导航守卫
1.全局守卫:
beforeEach 路由进入之前
afterEach 路由进入之后
2:路由独享守卫
beforeEnter 路由进入之前
3:组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前
五:关于API
5.1 $set
5.2 $nextTick
作用:异步,获取更新后的dom
原理:
$nextTick( callback ){
return Promise.resolve().then(()=>(
callback():
})
}
5.3 $refs(获取dom的)
5.4 $el (获取当前组件的根节点)
5.5 $data (获取当前组件的data数据)
5.6 $children(获取当前组件所有子组件的)
5.7 $root (获取根组件)
5.8 $parent(获取父组件)
5.9 data 定义(定义在return里面和外面的区别)
5.10 computed计算属性
1.computed计算属性的值可以修改吗? 可以! 但是要以 get/set的写法
2.当前组件v-model的值是computed来的那么可以修改吗? 同上
5.11 watch
5.12 methods和computed的区别
computed有缓存机制 methods没有缓存机制
六.关于指令
6.1 自定义指令
6.2 vue单项绑定
双向绑定 v-model
单向绑定 v-bind
6.3 v-if v-for 优先级
vue2 v-for 优先级高
vue3 v-if 优先级高
七.原理
7.1 双向绑定原理
通过Object.defineProperty劫持数据发生的改变,如果数据发生了改变在set中进行赋值,触发update进行更新改变{{str}},从而实现的双向绑定原理
7.2 diff算法
功能:提升性能 虚拟dom --> 数据化
主流:snabbdom virtual-dom
虚拟节点
{
children:undefined,
data: {},
elm: undefined,
key:undefined,
sel:'h1',
text:'好家伙'
}
真实节点
<h1>好家伙</h1>
新老节点替换规则:
1.如果是不同节点,那么就删除旧节点,创建插入新的节点
2.只能同级比较,不能跨层比较,如果跨层就删除旧节点,创建插入新的节点
3.如果是相同节点,情况较多!
3.1 新节点没有children 那么证明直接文本替换即可
3.2 新节点有children
新的有children 旧的也有children (( diff 算法核心!!!!!))
新的有children 旧的没有children 创建元素添加 把旧的内容删掉增加
diff算法 核心
1.旧前 和 新前
匹配:旧前的指针++ 、新前的指针++
2.旧后 和 新后
匹配: 旧后的指针--新后的指针--
3.旧前 和 新后
匹配: 旧前的指针++新后的指针--
4.旧后 和 新前
匹配: 旧后的指针-- 、新前的指针++
5.以上都不满足条件 ===》查找
新的指针++,新的添加到页面上并且新在旧的种有,要给旧的复制成undefined
6.创建或者删除
如果要提升性能,一定要加入key,在更改前后,确认是不是同一节点
八. 谈一下MVVM框架
未完,每周一更