【10】Vue

Dora_5537

已于 2024-06-06 00:40:40 修改

阅读量257

点赞数

分类专栏： 2024面试基础总结文章标签： vue.js 面试 javascript

于 2019-09-08 20:54:33 首次发布

本文链接：https://blog.csdn.net/Dora_5537/article/details/100111309

版权

2024面试基础总结专栏收录该内容

13 篇文章 0 订阅

订阅专栏

【VUE】

一、vue 实例的生命周期

四个过程：创建=>挂载=>更新=>销毁

八个钩子函数：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

Vue Lifecycle

(1) 通过 new Vue() 创建实例或组件，初始化事件和生命周期，执行beforeCreate钩子函数。

因为，此时只是一个空壳，数据还没有挂载，无法访问到数据和真实的dom，所以，beforeCreate钩子函数一般不做操作。

(2) 挂载数据 data，绑定事件 methods，执行created钩子函数。

这个时候已经可以使用到数据，也可以更改数据，在这里更改数据不会触发updated钩子函数，在这里可以在渲染前倒数第二次更改数据，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

(3) 寻找实例或组件对应的模板，编译模板把虚拟dom放入到render函数中准备渲染，执行beforeMount钩子函数。

在这个函数中虚拟dom已经创建完成，马上就要渲染，在这里也可以更改数据，不会触发updated钩子函数，在这里可以在渲染前最后一次更改数据，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

(4) 通过render函数渲染出真实dom，然后执行mounted钩子函数。

此时，组件已经出现在页面中，数据、真实dom都已经处理好了，事件都已经挂载好了，可以在这里操作真实dom等事情...

(5) 当实例或组件的数据更改之后，会立即执行beforeUpdate钩子函数，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿。

(6) 当更新完成后，执行updated钩子函数，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom。

(7) 当经过某种途径调用$destroy方法后，立即执行beforeDestroy钩子函数，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等。

(8) 组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed钩子函数，在这里做善后工作也可以。

其他：

页面首次加载会触发 beforeCreate、created、beforeMount、mounted。
created表示完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来。
DOM 渲染在 mounted 中就已经完成了。

二、vue组件间的参数传递

(1) 父组件给子组件传值，子组件通过 props 接受数据。

(2) 子组件给父组件传值，使用 $emit 方法。

(3) 子组件使用 $emit（‘someEvent’）派发事件，父组件使用 @someEvent 监听事件。

(4) 兄弟组件之间不能直接通信，只需要父元素搭个桥即可。

(5) 祖组件给孙组件跨层级传值，可以使用 provide（祖）和 inject（孙）。

三、vue-router

vue-router是vue单页面应用中的一个路径管理器。

vue-router要实现的功能是：更新视图，但不重新请求页面。

传统的页面应用，是用一些超链接来实现页面切换和跳转的，每次更新视图都需要重新请求页面，这是我们不想看到的（请求过多）。

vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。其中，Hash模式是默认的；History模式需要设置mode参数为history。

如果不在浏览器环境下（node环境下），则使用abstract模式。

// 根据mode确定history实际的类并实例化
switch (mode) {
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `invalid mode: ${mode}`)
    }
}

Hash模式和History模式的区别？

Hash模式的原理：

在Hash模式下，URL中包含有# (哈希符/锚点)，可以用来模拟一个完整的URL。虽然说#出现在URL中，但不会被包含在http请求中，所以当#后面的部分发生变化时，对服务端没有任何影响，也不会重新请求页面。

Hash模式在这里利用了window 对象可以通过onhashchange事件来监听hash值的变化，也就是#后面的部分。

如果#后面的部分发生变化，HashHistory对象就会将新路由添加到浏览器访问历史的栈顶HashHistory.push() 或者替换掉当前的路由 HashHistory.replace()，进而更新路由和视图。

History模式的原理：

History模式充分利用了HTML5 history interface中新增的window.history.pushState() 和 window.history.replaceState() 方法，在当前已有的 back()、forward()、go() 的基础之上，来对浏览器历史记录栈进行修改。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向服务端发送请求。

在HTML5History的构造函数中通过popState（window.onpopstate）可以监听地址的变化。

如果要很好地应用History模式，还需要后台配置支持。我们需要在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是app依赖的页面。

选用Hash模式还是History模式？根据自己的情况选择。

在History模式下，pushState设置的新URL可以是与当前URL同源的任意URL；而在hash模式下，只可修改#后面的部分，故只可设置与当前同文档的URL。

在History模式下，pushState通过stateObject可以添加任意类型的数据到记录中；而在hash模式下，只可添加短字符串。

在History模式下，pushState可额外设置title属性供后续使用。

在History模式下，URL修改得就和正常请求服务端的URL一样，如果服务端没有配置对应的路由处理，则会返回404错误。