vue面试题

た入场券 2022-11-17 10:18 215阅读 0赞

为什么props是单向绑定的?

> 所有prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。每次父级组件发生变更时，子组件中所有的prop将会刷新为最新的值。如果在一个子组件内部改变prop，vue会在浏览器控制台中发出警告。
> 
> 解释：因为父子组件引用是同一个数据，如果想断开这种引用关系，可以在子组件中做一层深度复制，这样就会断开。

query和params的区别？

> 传参:
> 
> this.$router.push(\{
> 
>     path:'/xxx',
> 
>     query:\{
> 
>         id:id
> 
>     \}
> 
> \})
> 
> 接收参数:
> 
> this.$route.query.id

> this.$router.push(\{
> 
>     name:'xxx',
> 
>     params:\{
> 
>         id:id
> 
>     \}
> 
> \})
> 
> 接收参数:
> 
> this.$route.params.id

> \*\*1.如果需要做到刷新不丢失参数和值必须通过地址栏\*\*
> 
> \*\*2.如果需要做到刷新不丢失可以通过动态路由\*\*

index.html和main.js是怎么关联起来的？

> 脚手架工具（比如 vue-cli）和构建工具（比如 Webpack）掩盖了很多细节。
> 
> 实际上 vue-cli 出来的项目都在某个角落隐藏着一个 index.html（有形或无形）。如果你用最新版的 vue-cli 创建新项目，这个文件位于\`public\`目录下。而这个文件实际上是一个模板（EJS 语法），Webpack 会在每次打包后将 entry 文件的路径写入这个模板指定的位置并生成一个新的 index.html 放到 dist 目录（这个行为本身是在 Webpack 配置中定义的，不是 Webpack 的默认行为）。实际上 main.js 也是关联了 index.html 的，只不过这个关联 Webpack 帮你做了。

Vue-cli调用后台接口，解决跨域？

> 第一种： Nginx做个代理转发
> 
> 第二种： 后台写接口的使用cros 解决一下跨域问题
> 
> 第三种： proxyTable

如何Vue首屏加载优化？

> 压缩：开启webapck gzip压缩
> 
> 合并：组件化，模块化
> 
> 打包：cdn导入：cdn引入vue,vue-router,vuex，element,axios，关闭sourcemap
> 
> 按需导入：路由，ui组件
> 
> 代码：避免报错，合理使用v-if&v-show,v-for&v-if,keep-alive,computed
> 
> 视觉：添加loading
> 
> 减少http请求，图片放在服务器
> 
>

vue路由跳转的优缺点？

> 优点:用户体验好，不需要每次都向服务器获取，快速展示给用户。
> 
> 缺点:使用浏览器的前进后退键的时候会重新发送请求，没有合理的利用缓存。
> 
> 单页面无法记住之前滚动的位置，无法在前进后退的时候记住之前的位置。

vue中的key有什么作用？

> 可以先解释一下虚拟dom的diff算法再引出加了key的作用？
> 
> （diff算法）
> 
> 修改一小部分DOM而渲染整个DOM的开销很大，所以根据真实DOM生成虚拟DOM,当虚拟DOM某个
> 
> 节点的数据发生变化，Vnode-oldnode（旧的真实dom节点和新的虚拟节点）比较（他们可以通过唯一的id进行区分，key来给每个节点做一个唯一标识），改变真实DOM那部分同一层级的一组节点，
> 
> 为了更高效的渲染虚拟DOM，通常会复用已有元素而不是从头开始渲染

vuex是什么？（可以先说一下出现原由）

> vuex：多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
> 
> Vuex是一个专为vue.js应用程序开发的状态管理模式
> 
> Vuex的五个核心概念：State，Getters，Mutations，Actions，Modules
> 
> State：唯一的数据源
> 
> Getters：派生出一些新的状态
> 
> Mutations：用来改变state状态的方法，只能包含同步操作，state更改只能在这进行，默认传入的参数为state
> 
> Actions：保存的也是改变state状态的方法，但是是通过提交mutations来修改的，可以是异步操作
> 
> Modules：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块

构建vue-cli工程都用到哪些技术？

> 1.vue.js：vue-cli工程的核心，主要特点数据双向绑定和组件系统
> 
> 2.vue-router：路由框架
> 
> 3.vuex：主要用于维护vue组件间共用的一些变量和方法
> 
> 4.axios(或者fetch,ajax)：用于发起get，或者post等http请求，用于promise设计。
> 
> 5.webpack：模块加载和vue-cli工程打包器
> 
> 6.eslint：代码规范工具

Vue.$nextTick的使用情景是？

> 1.在生命周期created操作DOM的话，代码要放在Vue.$nextTick
> 
> 2.想在数据变化后立即操作DOM
> 
> 解释:Vue的DOM是移步更新的

数据双向绑定的原理

>  MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
> 
> 【模型】指的是后端传递的数据。
> 
> 【视图】指的是所看到的页面。
> 
> 【视图模型】mvvm模式的核心，它是连接view和model的桥梁。
> 
> 它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现了，我们称之为数据的双向绑定。
> 
> （原理）
> 
> vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
> 
> Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图。

vue刷新当前界面

> 1.  this.$router.go(0)。这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好
> 2.  用vue-router重新路由到当前页面，页面是不进行刷新的。
> 3.  window.reload()和location.reload()。这种也是一样，画面一闪，体验不是很好
> 
> provide/inject组合，作用：允许一个祖先组件向所有子孙组件后代注入一个依赖，无 论组件层次有多深，并在起上下游关系成立的情况下生效。
> 
> 推荐解决方法：
> 
> App.vue生命reload
> 
> provide:()\{
> 
> return \{
> 
> reload:this.reload
> 
> \}
> 
> \},
> 
> inject:\['reload'\]
> 
> this.reload()

[vue.prototype和vue.use的区别和注意点][vue.prototype_vue.use]

> vue.prototype：实例上挂载属性/方法，例如Vue.prototype.axios = axios;
> 
> vue.use：引入插件，例如vuex，vue.use(vuex)
> 
> 区别：
> 
> 1、不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式
> 
> 2、非vue官方库不支持new Vue()方式
> 
> 3、每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。

axios和vue-axios区别

> 1、axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件
> 
> 2、axios使用的时候不能像vue的插件（如：Vue-Router、VueX等）通过Vue.use()安装插件，需要在原型上进行绑定：Vue.prototype.$axios = axios;
> 
> 3、vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装:Vue.use(vueAxios);

[vue.prototype_vue.use]: https://www.cnblogs.com/songfengyang/p/12492036.html