vue面试题

·  阅读 145

vue面试题

指令,插值

  • 插值,表达式
  • 指令,动态属性
  • v-html:会有xss风险,会覆盖子组件

watch和computed

  • computed有缓存,data不变则不会重新计算
  • watch不支持缓存,数据改变,直接会触发相应的操作
  • comouted不支持异步,当comouted内有异步操作时无效,无法监听数据的变化
  • warch支持异步

class和style

  • 使用动态属性
  • 使用驼峰式写法

条件渲染

v-if和v-show的区别?

  • v-if只有在判断为true的时候才会对数据进行渲染,false的时候把包含的代码进行删除。除非再次进行数据渲染,v-if才会重新判断
  • v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;隐藏,所以在不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏

二者如何选择?

  • 非频繁操作的情况下选择v-if,频繁操作选择v-show

循环(列表)渲染

如何遍历对象?

  • v-for遍历

v-for和v-if不能一起使用

  • 因为v-for的优先级比v-if高,意味着v-if 将分别重复运行于每个 v-for 循环中

事件

event参数,自定义参数

  • event是原生的

事件被绑定到哪里?

  • 事件被挂载到当前元素

表单

修饰符

  • .trim 自动过滤用户输入的首尾空白字符
  • .number 自动将用户的输入值转为数值类型
  • .lazy 当添加了.lazy修饰符后,双向绑定的数据就不同步了,相当于在input输入框失去焦点后触发的change事件中同步

vue组件使用

1.props和$emit

  • 父传子props,子传父$emit

2.组件间通讯-自定义事件

  • 应当及时销毁自定义事件,否则可能造成内存泄漏

3.组件生命周期 4.created和mounted的区别?

  • mounted在页面渲染完成后调用,created在页面渲染前,vue实例已经创建

5.父子组件生命周期执行顺序

  • 挂载阶段
    • 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
  • 更新阶段
    • 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
  • 销毁阶段
    • 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
  • 总结
    • 父子组件生命周期钩子的执行顺序遵循:从外到内,再从内到外

vue高级特性

1.自定义v-model 2.$nextTick

  • 原理:vue是异步渲染,页面渲染时会将data的修改做整合,多次data修改只会渲染一次,data改变之后,DOM不会立刻渲染,$nextTick会在DOM渲染之后被触发,以获取最新的DOM节点
  • vue 如何获取并操作DOM元素
    • 方法一:直接给的元素加id,使用document.getElementById(“id”)获取,然后操作 dom 元素
    • 方法二: 使用ref,给元素添加ref=“name” ,使用 this.$refs.name 获取到该元素,再对元素进行操作

3.slot插槽

  • 在定义组件时,在template中用slot来占个坑;使用时,将组件之间的内容来填坑。
  • 默认插槽
    • 插槽可以有默认值,直接在slot里设置组件,可以是自定义组件,也可以是系统标签。使用时直接在自定义标签里填充,扩展内容(可以是另外一个组件,套娃)。如果没有填充,使用默认值填充。
  • 具名插槽

QQ图片20220804112554.png

  • 作用域插槽
  • 目标: 子组件中的数据, 在给插槽赋值时在父组件环境下使用=> 子传父=>传数据
    • 创建子组件, 准备slot, 在slot上绑定属性和子组件值
    • 使用子组件, 传入自定义标签, 用template和v-slot="自定义变量名"
    • 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置

4.动态,异步组件

  • 动态组件: :is="component--name"用法,需要根据数据,动态渲染的场景(组件类型不确定)
  • 异步组件: import函数 按需加载,异步加载大组件

5.keep-alive

  • 缓存组件
  • 频繁切换,不需要重复渲染
  • 常出现于vue常见性能优化

6.mixin

  • 多个组件有相同的逻辑,抽离出来

mixin的问题

  • 变量来源不明确,不利于阅读
  • 多mixin可能会造成命名冲突
  • mixin和组件可能出现多对多的关系,复杂度较高
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改