Vue——生命周期函数（钩子函数）、销毁组件的方法（补充）、相关面试题

用户2704799027083
3,557 阅读5分钟

组件的生命周期函数（与data、methods同级）：

Vue实例从创建到销毁的过程，就是生命周期

vue项目运行的步骤：

  1. 打包=>运行=>挂载（el，render）=>每一个组件的生成工程（
  • 初始化生命周期函数
  • render执行，将模板字符串翻译成VNode
  • 数据劫持，观测watcher
  • 数据替换
  • 挂载） . 如果数据源变了=>通知订阅者watcher，去异步更新页面
  1. patch函数执行==>DIFF算法
  2. 同层比较并且打补丁，同层比较完毕，再次比较下层 （sameVNode、patchVNode、UpdataChilren=patchVNode）

一、组件创建前后：

1.beforeCreate() {}

组件创建之前，这个时候data和methods都不能使用

在这个项目中，我们可以做哪些操作？

  1. 可以进行网络请求，因为这个函数在运行时，XMLhttpRequest是可以访问并且去做AJAX请求的。

    • 注意：但是在这个项目中，不能对this对象进行操作，请求过来的资源不能用于页面渲染。因为此时vm对象正在创建中（this对象正在劫持data、methods）

  2. 做预加载,网页中同源加载的优化（同一个页面中img、script等等src属性去请求资源）

    • 先在这个函数中进行资源的预加载，当后面将资源渲染上去，就不用再加载了，这样用户的体验感就比较好

    • 因为资源已经加载过了，后面再加载就是本地加载了，速度就很快。 通常用来加载精灵图、第三方工具等资源比较大的资源（new Image().src="网址"）

案例：

image.png

image.png

2.created() {}

created表示完成数据观测、属性和方法的运算和初始化事件，此时$el属性还未显示出来（注：$el表示DOM节点对象）

组件创建完成之后。这是最早可以使用data和methods的钩子函数。

  1. 可以进行网络请求，因为这个函数在运行时，XMLhttpRequest是可以访问并且去做AJAX请求的。

  2. 可以操作this对象（因为此时的vm对象已经创建完毕）

  3. 创建的是实例，vm对象还没有挂载到DOM树中去，也就是此时可以操作this对象了，但是无法操作DOM

  4. 请求首屏数据，做首页（也就是用户进入页面，也没有进行任何操作，就可以看见的页面，这里的页面上的数据就可以在这里先提前请求）

  5. 因为有时候我们希望异步的网络请求和vm的挂载同时进行 体现出CPU多核的优势

二、挂载前后（渲染页面前后）：

3.beforeMount() {}

挂载之前，指的是节点还没渲染完成。

  • 渲染前的操作，vm对象已经创建完毕了，在挂载之前触发的钩子，这个函数可以操作this对象了，但是无法操作DOM。

4、mounted() {}

vm对象已经挂载到页面了，模板渲染完成。（挂载的是节点）

  • 请求首屏数据，一般是在这里请求数据，上面created函数用来做页面的框架，就是页面的结构，让用户加载进来就可以先看见一些页面的框架，就愿意去等待我们页面数据的加载

  • 因为有时候我们希望本地的UI骨架已经加载完毕以后再去请求数据刷新UI

注：mounted和created都可以用来请求axios

三、用户操作了页面，对数据已经进行了更新，正在重新渲染页面的前后

运行阶段的两个，可以执行0次和无数次（只要用户对页面进行了操作，就会执行），更新的是视图

注意：

  1. 更新的是视图

  2. 不能在这两个钩子中去做网络请求，请求新数据，去更新数据源，这样会导致死循环。（因为如果在这里更新了数据，页面就会更新，页面更新了，就又会执行这个钩子函数，这样循环，就进行了死循环，如果请求的数据和以前的数据一样，就不会刷新页面）

5、beforeUpdate() {}

数据改变，视图更新之前。

  • 页面已经更新了，页面重新渲染前（记住：并不是数据更新前，是已经更新完了），触发的钩子

  • 可以做提示效果（比如加载中：用一个一直旋转的圈表示，告诉用户，页面在加载中，等待一会就好）

6、updated() {}

数据改变，视图更新之后。

  • 页面已经重新渲染了触发的钩子

  • 移除beforeUpdate函数做的提示功能

四、销毁阶段的两个

7、beforeDestroy() {}

销毁之前。最后一个可以使用data和methods的钩子函数。

  • 保存用户的行为配置文件（比如：播放器的进度等）

8、destroyed() {}

销毁之后。

  • 无法操作this（因为组件已经被销毁了）

  • 往往把当前组件中的计时器清除了，可以把body的滚动条滚到顶部

补充：销毁组件的方法this.$destroy()

image.png

面试题

1.为什么要设计生命周期函数？

答案：为了更好的设计程序（区分业务），让代码更有逻辑和可维护性

  1. 把整个运行期间的业务区分的很明显
  2. 能够更好的帮助我们把产品的业务逻辑实现了
  3. 更有利于我们维护产品 和 修改需求
  4. 能够让我们写出更高质量的产品的代码

2.页面首次加载过程中，会依次触发哪些钩子？

答案：beforeCreate、created、beforeMount、mounted

3.this.$el是什么？它在哪些钩子中才能访问？、

答案：它代表了当前组件的真实DOM，要在mounted之后才有

4.Vue实例的data属性，在哪些钩子中能访问？

答案：created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy

5.为什么不要在更新钩子中做页面的数据请求？

答案：会导致死循环，react有一个shoudCoponentUpdate可以自己控制，但是vue中没有

6.你用beforeCreate做过什么业务？

答案：这个钩子中可以做网络请求，但是vm没有构建完毕，此时数据方法等等的劫持还没有完成，不能操作this，因此可以做预加载

avatar
文章
阅读
粉丝