Vue常问面试题2022（每天记十个肝货）

 面试题

目录

 面试题

1.Vue- loader是什么？它的用途有哪些？

2.请说出vue.cli项目的src目录中每个文件夹和文件的用法。

3.在Vue.cli中怎样使用自定义组件？

4.V-model是什么？有什么作用？

5.请说明<keep-alive>组件的作用。

6.实现多个根据不同条件显示不同文字的方法。

7.什么是数据的丢失？

8.如何检测数据变化？

9.如何检测对象变化？

10.说一下Vue.js页面闪烁{{message}}。

---

Vue- loader是什么？它的用途有哪些？

• 它是解析.vue文件的一个加载器，可以将 template/js/style转换成 JavaScript模块。

  用途是通过 vue-loader, JavaScript可以写 EMAScript 6语法， style样式可以应用scss或less, template可以添加jade语法等。

请说出vue.cli项目的src目录中每个文件夹和文件的用法。

• assets文件夹存放静态资源；components存放组件；router定义路由相关的配置；view是视图；app. vue是一个应用主组件；main.js是入口文件。

在Vue.cli中怎样使用自定义组件？

• 在 components目录中新建组件文件，脚本一定要导出暴露的接口。

• 导入需要用到的页面（组件）。

• 将导入的组件注入uejs的子组件的 components属性中。

• 在 template的视图中使用自定义组件。

V-model是什么？有什么作用？

• v- model是 Vue. js中的一条指令，可以实现数据的双向绑定。

请说明<keep-alive>组件的作用。

• 当<keep- alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

  < keep-alive>是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。

• 当在<keep- alive>内切换组件时，它的 activated和 deactivated这两个生命周期钧子函数将会执行。

实现多个根据不同条件显示不同文字的方法。

• 通过“v-if,v-else”指令可以实现条件选择。但是，如果是多个连续的条件选择，则需要用到计算属性computed。例如在输入框中未输入内容时，显示字符串‘请输入内容’，否则显示输入框中的内容。

什么是数据的丢失？

• 如果在初始化时没有定义数据，之后更新的数据是无法触发页面渲染更新的，这部分数据是丢失的数据（因为没有设置特性），这种现象称为数据的丢失。

如何检测数据变化？

• 由于 JavaScript特性的限制， Vue. js不能检测到下面数组的变化，即以下数组中改变的数据“丢失”了

• 通过直接索引设置元素，如app.arr[0]=...

• 修改数据的长度，如 app. arr.length。

• 为了解决该问题，Vue.js扩展了观察数组，为它添加了一个$set( )方法，用该方法修改的数组，能触发视图更新，检测数据变化。

如何检测对象变化？

• 由于 JavaScript特性的限制，Vue.js不能检测到对象属性的添加或删除。因为Vue.js在初始化时将属性转化为 getter/setter，所以属性必须在data对象中定义，才能在初始化时让Vue.js转换它并让它响应。

说一下Vue.js页面闪烁{{message}}

• Vue. js提供了一个v- cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。