No2.10 前端面试题 1. vue生命周期 2. vue中的常见修饰符 3. 组件通信 4. keep-alive

1. vue生命周期

• 组件从创建到销毁的过程就是它的生命周期
• 使用keep-alive时多出了两个周期
• 1. activited 组件激活时
• 2. deactivited 组件被销毁时

1. 创建

• beforeCreat 在这个阶段,属性和方法都不能使用
• created 实例创建完成后, 这个阶段里,完成了数据监控,可以使用数据,修改数据,不会触发update 也不会更新视图 ,一般在此阶段请求数据(对DOM有影响的数据)

2. 挂载

• beforeMount 完成了模板的编译,虚拟DOM也创建完成,即将渲染,修改数据,不会触发update
• mounted 把编译好的模板挂载到页面,这里可以发送异步请求,也可以访问DOM节点

3. 更新

• beforeUpdate 组件事件更新之前使用,数据是新的,页面上的数据是旧的,组件即将更新,准备渲染,可以改数据
• update render重新做了渲染,此时数据和页面都是新的,避免在此更新数据

4. 销毁

• beforeDestory 实例销毁前,在这里实例还可以用,可以清除定时器等
• destory 组件被全部销毁

2. vue中的常见修饰符

1. 事件修饰符

• .stop 阻止冒泡
• .prevent 阻止默认行为
• .capture 内部元素触发的事件先在此处理
• .self 只有在event.target是当前元素时触发
• .once 事件只会触发一次
• .passive 立即触发默认行为
• .native 把当前元素作为原生标签看待

2. 按键修饰符

• keyup 键盘抬起
• keydown 键盘按下

3. 鼠标修饰符

• .left 鼠标左键
• .right 鼠标右键
• .middle 鼠标中键

4. 表单修饰符

• .lazy 等输入完之后再显示
• .trim 删除内容前后的空格
• .number 输入是数字或转为数字

5. 系统修饰符

• 触发鼠标或键盘的监听
• .ctrl
• .alt
• .meta

3. 组件通信

1. 父转子

• 1. props 父组件使用自定义属性,子组件使用props
• 2. $ref 引用信息会注册在父组件的$refs对象上

2. 子传父

• $emit 子组件绑定自定义事件,触发执行后,传给父组件,父组件需要用事件监听来接收参数

3. 兄弟传

• new一个新的vue实例,用on和emit来对数据进行传递

4. vuex传值

4. keep-alive

1. 是vue的一个内置组件,包裹组件的时候会缓存不活跃的组件实例,并不是销毁他们
2. 作用: 把组件切换的状态保存在内存里,防止重复渲染DOM节点减少加载时间和性能消耗,提高用户体验