VUE面试题

1、有哪些生命周期

共分为8个阶段，以及一些特殊场景的生命周期

生命周期	描述
beforeCreate	组件实例创建之初
created	组件实例已经完全创建	组件初始化完毕，各种数据可以使用
beforeMount	组件挂载之前	未执行渲染、更新，dom未创建
mounted	组件挂载到实力上去之后	初始化结束，dom已创建，可用于获取访问数据和dom元素
beforeUpdate	组件数据发生变化，更新之前
updated	组件数据更新之后
beforeDestroy	组件实例销毁之前
destroyed	组件实例销毁之前
activated	keep-alive缓存的组件激活时
deactivated	keep-alive缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误时被调用

Vue中的`$el`属性是指向Vue实例挂载的DOM元素的引用

this指向组件实例，$el用于获取Vue实例挂载的DOM元素，在mounted生命周期中才有效

(1)第一次页面加载会触发哪几个钩子?

     beforeCreate, created, beforeMount, mounted

(2)页面刷新时，触发哪几个钩子函数？

  beforeCreate(),created(), beforeMount, mounted,beforeUpdate, updated

(3)DOM 渲染在哪个周期中就已经完成?

      mounted

2、获取后端接口数据写在哪个生命周期？为什么选择？----->mounted和created的区别

created: 是在组件实例一旦创建完成时候立刻调用，这时候dom节点并未生成（也就是$el属性还不可用）。

mounted：是在页面dom节点渲染完毕之后就立刻执行的（$el属性可以访问）---->可以访问和操作组件中的dom元素。

两者共同点：都能拿到实例对象的属性和方法

问题本质---->触发时机：created比mounted更早  ，放在mounted中的请求有可能导致页面闪动（因为此时页面dom结构已经生成），但如果在页面加载前完成请求，则不会出现此情况。

• 当你需要获取数据来初始化组件的状态，并且不需要访问 DOM 元素时，created是一个很好的选择。例如，从后端 API 获取数据来填充组件的data属性中的数组或对象。
• 如果你需要根据从接口获取的数据来操作 DOM，比如更新某个元素的样式或者内容，就应该在mounted中获取数据。另外，如果你的数据获取操作依赖于 DOM 的某些属性（例如获取元素的尺寸等），也需要在mounted中进行。

3、vue组件间的通信方式

        3.1、props传递数据

           适用：父组件传递数据给子组件         

                 子组件设置props属性，定义接收父组件传递过来的参数

        3.2、$emit触发自定义事件

           适用：子组件传递数据给父组件 

                子组件通过$emit触发 自定义事件，$emit第二个参数为传递的数值

                父组件绑定监听器获取到子组件传递过来的参数

        3.3、ref

            父组件在使用子组件的时候设置ref

        3.4、EventBus

           适用：兄弟组件传值

                创建一个中央事件总线EventBus，兄弟组件通过$emit触发自定义事件，另一个兄弟组件通过$on监听自定义事件

        3.5、parent、root

            通过共同祖辈$parent或者$root搭建通信桥连

                兄弟组件:

this.$parent.on('add',this.add)

                另一个兄弟组件:

this.$parent.on('add',this.add)

        3.6、attrs与listeners

            适用：祖先传递数据给子孙

                设置批量向下传属性$attrs和$listeners

                可以通过v-bind="$attrs"传入内部组件

        3.7、provide与inject

                在祖先组件定义provide属性，返回传递的值

                在后代组件通过inject接收组件传递过来的值

        3.8、vuex

             适用：复杂关系的组件传递数据

                Vuex作用相当于一个用来存储共享变量的容器

4、为什么data属性是一个函数而不是一个对象？

        组件实例对象data必须为函数，防止多个组件之间data的复用，造成数据污染

5、从浏览器地址栏输入url到页面显示的步骤

1. 解析url：      对输入的url解析，提取其中的关键信息，例如通过域名来确定要访问的服务器

2. 缓存检查：   浏览器检查本地缓存，查看是否已经有该URL对应的资源缓存，如果有，并且缓存的资源任然有效，就直接使用缓存的内容来显示页面，从而加快页面加载速度。

3. DNS查询（域名系统查询）：     如果没有有效的缓存，对于url中的域名部分通过DNS查询来获取对应的IP地址。浏览器会首先在本地DNS缓存中查找，如果本地没有，就会向操作系统配置的DNS服务器发送查询请求。DNS服务器会递归地查询域名的IP地址。

4. 建立TCP连接（传输控制协议连接）：   建立 TCP 连接后，浏览器会根据 URL 中的协议（如 HTTP/1.1 或 HTTP/2）发送 HTTP 请求到服务器。（请求消息包含请求行（如 GET /index.html HTTP/1.1）、请求头（包含如 User - Agent、Accept - Encoding 等信息）和请求体（对于 POST 等请求方法，包含要发送的数据）。）

5. 服务器处理请求并返回响应：   服务器接收到浏览器的 HTTP 请求后，会根据请求的内容进行处理。   如果请求的是一个 HTML 页面，服务器可能会从磁盘中读取对应的文件，还可能会执行服务器端脚本（如 PHP、Python 等）来生成动态内容。然后，服务器会构建一个 HTTP 响应消息返回给浏览器。响应消息包含响应行（如 HTTP/1.1 200 OK，表示成功响应）、响应头（包含如 Content - Type、Content - Length 等信息）和响应体（包含实际的内容，如 HTML 代码、图片数据等）。

6. 浏览器接收并解析响应：    浏览器接收到服务器返回的 HTTP 响应后，首先会查看响应行的状态码来确定请求是否成功。例如，状态码 200 表示成功，404 表示找不到页面，500 表示服务器内部错误。然后，浏览器会根据响应头中的信息来处理响应体。如果响应头中的 Content - Type 是 “text/html”，浏览器就知道要将响应体作为 HTML 代码进行解析。它会开始解析 HTML，构建 DOM（文档对象模型）树，解析过程中如果遇到外部资源引用（如 CSS 文件、JavaScript 文件、图片等），会再次发起请求来获取这些资源。

7. 渲染页面：   在解析 HTML 和获取相关资源后，浏览器开始渲染页面。首先会根据 CSS（层叠样式表）规则来确定页面元素的布局和样式。例如，将文字设置为特定的字体、颜色，将元素定位到页面的特定位置等。然后，将 DOM 树中的元素和样式结合起来，生成可视化的页面，显示在浏览器窗口中。如果页面中有 JavaScript 代码，浏览器还会执行这些代码，可能会对页面进行动态更新，如添加交互功能、修改页面内容等。

6、MVVM（Model-View-ViewModel）

        MVVM即模型-视图-视图模型,是一种设计模式。

        M (模型model)：代表数据模型

        V（视图view）：UI 组件，它负责将数据模型转化成UI 展现出来

        VM（视图模型viewmodel）：是一个同步View 和 Model的对象。   ---->核心、连接model和view的桥梁

交互式双向的（两个方向）：

（1）将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。

（2）将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

ViewModel的作用：

（1）向上与视图层进行数据绑定

（2）向下与model层通过接口请求进行数据交互

优点：

（1）分离视图和模型，降低代码耦合

（2）提高可测试性

（3）自动更新dom

7、computed和watch的区别

                                 computed                                                         watch

                                 计算属性                                                        监听属性

                                支持缓存                                                        不支持缓存

                                不支持异步                                                     支持异步

                               第一次加载时就监听                                    第一次加载时不监听

8、vue是如何实现双向绑定的？

        Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图。

        通过Object.defineProperty()来劫持各个属性的setter， getter，在数据发生变动时通知Vue实例，触发相应的getter和setter回调函数。

        vue3.0中通过Proxy代理对象进⾏类似的操作

9、proxy和Object.defineProperty()的优劣对比？

proxy优势:

（1）proxy可以直接监听对象而非属性

（2）proxy可以直接监听数组的变化

（3）proxy有多达13种拦截方法，而Object.defineProperty不具备

（4）proxy返回的是一个新对象，我们可以之操作新的对象达到目的

Object.defineProperty优势：

（1）兼容性好，支持IE9

10、v-show和v-if

        控制元素的显示与隐藏

不同点：

（1）v-show：通过修改元素CSS属性中的display的让其显示或隐藏

         v-if：通过直接销毁和重建DOM达到让元素显示和隐藏的效果

（2）v-show：切换开销小，初始开销较大

          v-if：初始渲染小，切换开销大

11、vue路由传参的几种方式

        11.1 动态路由（页面刷新数据不丢失）

methods：{
  insurance(id) {
     //直接调用$router.push 实现携带参数的跳转
     this.$router.push({
       path: `/particulars/${id}`,
     })
}

        接收页面通过 this.$route.params.id 接收

        11.2、路由 name 匹配，通过 params 传参（页面刷新参数丢失！）

methods：{
  insurance(id) {
     this.$router.push({
        name: 'particulars',
        params: {
          id: id
        }
      })
  }

        通过 this.$route.params.id 接收参数

        11.3、路由 path 路径匹配，通过 query 传参（页面刷新参数不丢失）

methods：{
  insurance(id) {
    this.$router.push({
      path: '/particulars',
      query: {
        id: id
      }
   })
 }

        通过 this.$route.query.id 接收参数

12、vue.cli 中怎样使用自定义组件？

第一步：在components目录新建组件文件（indexPage.vue），script一定要export default {}。

第二步：在需要用的页面（组件）中导入：import indexPage from '@/components/indexPage.vue'

第三步：注入到vue子组件的components属性上面,components:{indexPage}

第四步：在template视图view中使用，例如有indexPage命名，使用的时候则index-page。

13、vuex 

        13.1、vuex是什么？怎么使用？哪种功能场景使用它？

  vue框架中状态管理。在main.js引入store注入。

     新建一个目录store 。

      场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

        13.2、vuex有哪几种属性？

       State、 Getter、Mutation 、Action、 Module。

（1） vuex的State特性

        state就是数据源存放地，对应于一般Vue对象里面的data。

       state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。

       通过mapState把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

（2）vuex的Getter特性

       getters 可以对State进行计算操作，它就是Store的计算属性。

       虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。

       如果一个状态只在一个组件内使用，可以不用getters。

（3）vuex的Mutation特性

       Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

14、vue-loader是什么？用途有哪些？

        解析.vue文件的一个加载器。

        js可以写es6、style样式可以scss或less、template可以加jade等。

15、scss 是什么？在 vue.cli 中的安装使用步骤？有哪几大特性？

        css的预编译语言。

使用步骤：

        第一步：先装css-loader、node-loader、sass-loader等加载器模块；

        第二步：在build目录找到webpack.base.config.js，在extends属性中加一个拓展.scss；

        第三步：在同一个文件，配置一个module属性；

        第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”；

特性:

        可以用变量，例如（$变量名称=值）；

        可以用混合器；

        可以嵌套；

16、为什么避免 v-if 和 v-for 一起用？

      当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，只检查它一次，且不会在 v-if 为否的时候运算 v-for。

 持续更新中。。。。。。。

持续更新中。。。。。。。