zoukankan      html  css  js  c++  java
  • vue面试题

    说一下什么是virtual dom

    用JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异 把所记录的差异应用到所构建的真正的DOM树上,视图就更新了。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。

    vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

    每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。

    实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作

    挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

    接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

    接下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情...

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

    当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom

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

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

    vue 如何优化首页的加载速度?vue 首页白屏是什么问题引起的?如何解决呢?

    https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/234

    在 Vue 中,子组件为何不可以修改父组件传递的 Prop

    原因很简单,一个父组件下不只有你一个子组件。 同样,使用这份 prop 数据的也不只有你一个子组件。 如果每个子组件都能修改 prop 的话,将会导致修改数据的源头不止一处。

    所以我们需要将修改数据的源头统一为父组件,子组件像要改 prop 只能委托父组件帮它。从而保证数据修改源唯一

    https://muyiy.cn/question/frame/40.html

    双向绑定和 vuex 是否冲突

    https://muyiy.cn/question/tool/70.html

    Vue 的响应式原理中 Object.defineProperty 有什么缺陷?

    https://muyiy.cn/question/frame/51.html

    Vue 的父组件和子组件生命周期钩子执行顺序是什么

    https://muyiy.cn/question/frame/78.html

    vue 渲染大量数据时应该怎么优化?

    https://muyiy.cn/question/frame/118.html

    vue 如何优化首页的加载速度?vue 首页白屏是什么问题引起的?如何解决呢?

    https://muyiy.cn/question/frame/119.html

    vue 是如何对数组方法进行变异的?例如 push、pop、splice 等方法

    https://muyiy.cn/question/frame/123.html

  • 相关阅读:
    CSS Sprite笔记
    前端分页页码静态部分制作
    有趣的网页小部件笔记
    Lintcode 85. 在二叉查找树中插入节点
    Lintcode 166. 主元素
    网页失去焦点标题变化效果
    Lintcode 166. 链表倒数第n个节点
    Lintcode 157. 判断字符串是否没有重复字符
    Lintcode 175. 翻转二叉树
    Lintcode 372. O(1)时间复杂度删除链表节点
  • 原文地址:https://www.cnblogs.com/zhoujingguoguo/p/11539627.html
Copyright © 2011-2022 走看看