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里设置组件，可以是自定义组件，也可以是系统标签。使用时直接在自定义标签里填充，扩展内容（可以是另外一个组件，套娃）。如果没有填充，使用默认值填充。
- 具名插槽
- 作用域插槽
- 目标: 子组件中的数据, 在给插槽赋值时在父组件环境下使用=> 子传父=>传数据
- 创建子组件, 准备slot, 在slot上绑定属性和子组件值
- 使用子组件, 传入自定义标签, 用template和v-slot="自定义变量名"
- 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置
4.动态，异步组件
- 动态组件： :is="component--name"用法，需要根据数据，动态渲染的场景(组件类型不确定)
- 异步组件: import函数 按需加载，异步加载大组件
5.keep-alive
- 缓存组件
- 频繁切换，不需要重复渲染
- 常出现于vue常见性能优化
6.mixin
- 多个组件有相同的逻辑，抽离出来
mixin的问题
- 变量来源不明确，不利于阅读
- 多mixin可能会造成命名冲突
- mixin和组件可能出现多对多的关系，复杂度较高
