Vue 面试知识点

Unsplash class 和 style 使用动态属性，使用驼峰式写法 v-if和 v-show v-if 不渲染不满足判断条件的模块，v-show 渲染但不显示，使用场景：是否多次切换或频繁更新条件状态 keep-alive 缓存组件，使用场景：频繁切换，不需要重复渲染 v-for 中添加唯一的 key 为了高效的更新虚拟 DOM，会根据 key 值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素，添加方式：key="'list_' + index" mixin 抽离多个组件里的公共逻辑 缺点：变量来源不明确，不利于代码阅读；多个 mixin 可能会造成命名冲突；mixin 和组件可能会出现多对多关系，复杂度高 $nextTick Vue 是异步渲染，data 改变后，DOM 不会立刻渲染，页面渲染时会将 data 的做整合，$nextTick 会在 DOM 渲染完之后执行延迟回调，减少 DOM 操作次数，提高性能 组件 data 为什么返回函数 两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰 Component.prototype.data = { message: 'hello' } Component.prototype.data = function() { return { message: 'hello' } } 组件化 传统组件，只是静态渲染，更新还要依赖于操作 DOM Vue MVVM 数据驱动视图，修改 Model 数据；ViewModel 监听事件、指令；View 渲染 动态组件 :is // 列表页：轮播图、文章、视频、图片 异步组件 import comments: { Tab: () => import('../comments/Tab') } 计算属性和侦听器 computed 有缓存，data 不变则不会重新计算，监听值类型可正常拿到 oldVal watch 一般用于监听数据变化的同时，进行异步操作或者是比较大的开销，监听引用类型拿不到 oldVal，因为指针相同，此时已经指向了新的 Val Vue 生命周期（创建、挂载、更新、销毁） beforeCreate created 页面还没有渲染，但 Vue 实例已经初始化了，可以调用 methods 中的方法、改变 data 中的数据，使用场景：发送请求获取数据 beforeMount mounted 页面已经渲染完毕，可以获取到 el 中的 DOM 元素，进行 DOM 操作 beforeUpdate updated beforeDestroy 清除定时器、自定义事件 destroyed 父子组件创建、更新顺序 父组件 created 子组件 created 子组件 mounted 父组件 mounted 父组件 beforeUpdate 子组件 beforeUpdate 子组件 updated 父组件 updated 组件之间的传值通信 父组件给子组件传值通过 props 子组件给父组件传值通过 $emit 触发回调 其他组件通信，通过实例一个 Vue 实例 event 作为媒介，要相互通信的组件之中，都引入 event 动态路由配置（路由懒加载） { path: '/user/:id', component: () => import('../components/User') } vue-router 路由模式 hash 模式 url 多了 # 号，它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，不需要后台进行配置，因此改变 hash 不会重新加载页面 history 模式 利用了 pushState() 和 replaceState() 方法，history 模式改变了路由地址，因为需要后台配置地址 History.pushState() 方法用于在历史中添加一条新记录，浏览器地址栏立刻显示新地址，但并不会跳转，它只是成为浏览历史中的最新记录 History.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个 事件修饰符

表单部分 End of File 行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^

本文章由javascript技术分享原创和收集