Vue.js面试题（二）

Vue.js面试题（一）https://developer.aliyun.com/article/1399404

21. ★★★ Vue-router 使用params与query传参有什么区别

用法上

1：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.和和和route.query.name和this.route.query.name和this.route.query.name和this.′r o u t e . q u e r y . n a m e 和 t h i s . route.query.name和this.route.query.name和this.''route.params.name。

展示上

2：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

3：params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。

4：params、query不设置也可以传参，params不设置的时候，刷新页面或者返回参数会丢失

22. ★★★ Vue中 keep-alive 的作用

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

一旦使用keepalive包裹组件，此时mouted，created等钩子函数只会在第一次进入组件时调用，

当再次切换回来时将不会调用。

此时如果我们还想在每次切换时做一些事情，就需要用到另外的周期函数，

actived和deactived，这两个钩子函数只有被keepalive包裹后才会调用。

23. ★★★ Vue如何实现单页面应用

通常的url 地址由以下内容构成：协议名 域名 端口号 路径 参数 哈希值，

当哈希值改变，页面不会发生跳转，单页面应用就是利用了这一点，

给window注册onhashchange事件，当哈希值改变时通过location.hash就能获得相应的哈希值，

然后就能跳到相应的页面。

24. ★★★ 说出至少4种Vue当中的指令和它的用法？

v-if(判断是否隐藏，用来判断元素是否创建)
v-show(元素的显示隐藏，类似css中的display的block和hidden)
v-for(把数据遍历出来)
v-bind(绑定属性)
v-model(实现双向绑定)

25.★★★ Vue-loader解释一下

解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，

再分别把它们交给对应的 Loader 去处理。

26.★★★ 用过插槽吗？用的是具名插槽还是匿名插槽

用过，都使用过。

插槽相当于预留了一个位置，可以将我们书写在组件内的内容放入，

写一个插槽就会将组件内的内容替换一次，两次则替换两次。

为了自定义插槽的位置我们可以给插槽取名，它会根据插槽名来插入内容，一一对应。

27.★★★ Vue 路由守卫

vue-router 提供的导航守卫主要用来对路由的跳转进行监控，

控制它的跳转或取消，路由守卫有全局的, 单个路由独享的, 或者组件级的。

导航钩子有3个参数：

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

28.★★ Vue中如何实现子组件内的css样式名在项目中绝对唯一性

在style标签上加上scoped属性

29.★★★★★ Vue3中的双向数据绑定proxy

Proxy相当于在目标对象之前架设一层“拦截”，外界对该对象的访问，

都必须先通过这层拦截，因此提供了一种机制，

可以对外界的访问进行过滤和改写,

可以这样认为,Proxy是Object.defineProperty的全方位加强版，

它解决了之前defineProperty无法监听到数组变化等缺点。

30.★★★★★ Vue和React中diff算法区别

vue和react的diff算法，都是忽略跨级比较，只做同级比较。

vue diff时调动patch函数，参数是vnode和oldVnode，分别代表新旧节点。

1.vue对比节点。当节点元素相同，但是classname不同，认为是不同类型的元素，删除重建，而react认为是同类型节点，只是修改节点属性。

2.vue的列表对比，采用的是两端到中间比对的方式，而react采用的是从左到右依次对比的方式。当一个集合只是把最后一个节点移到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移到第一个。总体上，vue的方式比较高效。

31.★★★ 请你说一下 Vue 中 create 和 mount 的区别

create为组件初始化阶段，在此阶段主要完成数据观测(data observer)，属性和方法的运算， watch/event 事件回调。

然而，挂载阶段还没开始，此时还未生成真实的DOM，也就无法获取和操作DOM元素。

而mount主要完成从虚拟DOM到真实DOM的转换挂载，此时html已经渲染出来了，

所以可以直接操作dom节点。

32.★★★★ Object.defineProperty有什么缺点

• 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
• 只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。

33.★★★★ axios是什么？怎么使用？描述使用它实现登录功能的流程?

axios 是请求后台资源的模块。

通过npm install axios -S来安装，在大多数情况下我们需要封装拦截器，

在实现登录的过程中我们一般在请求拦截器中来加入token，

在响应请求器中通过判断后端返回的状态码来对返回的数据进行不同的处理。

如果发送的是跨域请求，需在配置文件中 config/index.js 进行代理配置。

34.★★ v-model是什么？Vue中标签怎么绑定事件？

v-model是一个语法糖，这一个指令可以分为几个指令，

它内部已经帮我们处理整合了。对于普通的文本框来说，

v-model = v-bind:value + @input。

对单选框和复选框来说，v-model = v-bind:checked + @change，

并且它还有一个非常重要的功能，就是解决父子组件之间的通讯问题，

可以提升我们的开发效率。

在vue中通过使用的方式来绑定事件。

35.★★★ 路由懒加载

把不同路由对应的组件分割成不同的代码块，

然后当路由被访问时才加载对应的组件即为路由的懒加载，

可以加快项目的加载速度，提高效率。

通过这种格式来导入组件const foo = () => import(‘./foo.vue’);

36.★★★★ computed和watcher的区别？watch实现原理？watch有几种写法？

计算属性computed :

1.支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

1.不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4. 当一个属性发生变化时，需要执行对应的操作；一对多；

5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

immediate：组件加载立即触发回调函数执行，

deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。

注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

watch工作原理:

watch在一开始初始化的时候，会读取一遍监听的数据的值，此时那个数据就收集到watch的watcher了然后你给watch设置的handler，watch 会放入watcher的更新函数中，当数据改变时，通知watch的watcher进行更新，于是你设置的handler就被调用了。

37. ★★★★ 如果你是leader，做管理系统项目 Vue和React 怎么选择？

评估项目成员的水平，如果成员js基础较好、编码能力较强则选择React，否则Vue。

评估系统的大小，如果想构建生态系统，则选择React，如果要求而快，简单和“能用就行",则选择Vue。

评估系统运行环境，如果你想要一个同时适用于Web端和原生APP的框架，请选择React(RN)。

38.★★★ Vuex的缺点

如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的，

并且state中的值会伴随着浏览器的刷新而初始化，无缓存。

39.★★★★ Vue和React区别

1、Vue 使用的是 web 开发者更熟悉的模板与特性，Vue的API跟传统web开发者熟悉的模板契合度更高，比如Vue的单文件组件是以模板+JavaScript+CSS的组合模式呈现，它跟web现有的HTML、JavaScript、CSS能够更好地配合。React 的特色在于函数式编程的理念和丰富的技术选型，Vue更加注重web开发者的习惯。

2、Vue跟React的最大区别在于数据的reactivity，就是反应式系统上。Vue提供反应式的数据，当数据改动时，界面就会自动更新，而React里面需要调用方法SetState。我把两者分别称为Push-based和Pull-based

40.★★★ Vue路由传参，刷新后还有吗

通过params传参会出现参数丢失的情况，

可以通过query的传参方式或者在路由匹配规则加入占位符即可以解决参数丢失的情况。

Vue.js面试题（三）https://developer.aliyun.com/article/1399431?spm=a2c6h.13148508.setting.14.3a524f0eDMRXfg