[Vue] vue的一些面试题3

1. vue 组件里的定时器要怎么销毁?

当生命周期销毁后,并没有将组件中的计时器销毁,虽然页面上看不出来,但是如果在控制台打印的话,会发现计时器还在运行,所以要销毁计时器,避免代码一直执行

const timer = setInterval(() =>{
    // 某些定时器操作
}, 500);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
    clearInterval(timer);
})

2.你有使用过 JSX 吗?说说你对 JSX 的理解

jsx 不是一门新的语言,是一种新的语法糖。让我们在 js 中可以编写像 html 一样的代码。
允许 XML 语法直接加入到 JavaScript 代码中,让你能够高效的通过代码而不是模板来定义界面

3.<template></template>有什么用?

当做一个不可见的包裹元素,减少不必要的 DOM 元素,整个结构会更加清晰。

4.vue 的 is 这个特性你有用过吗?主要用在哪些方面?

动态组件,当你多个组件需要通过 v-if 切换时,可以使用 is 来简化代码

5.你了解什么是函数式组件吗?

需要提供一个 render 方法, 接受一个参数(createElement 函数), 方法内根据业务逻辑,通过 createElement 创建 vnodes,最后 return vnodes
createElement 函数, 三个参数, 第一个参数是 html 标签或自定义组件,第二个参数一个 obj(包含 props, on...等等), 第三个参数 children(通过 createElement 构建, 或者字符串)

6.组件中写 name 选项有什么作用?

  • 项目使用 keep-alive 时,可搭配组件 name 进行缓存过滤
  • DOM 做递归组件时需要调用自身 name
  • vue-devtools 调试工具里显示的组见名称是由 vue 中组件 name 决定的

7.说说你对 slot 的理解有多少?slot 使用场景有哪些?

slot, 插槽, 在使用组件的时候, 在组建内部插入东西.组件封装的时候最常使用到

8.你了解 vue 的 diff 算法吗?

vue 中会对整个 list 进行遍历, 判断使用到的某些属性是否发生变更, 从而更新发生变更的 item
所以 key 属性才会显得很重要, 它会告诉你, 我那个 item 发生变更, 而不是去检测整个 list

9.vue 如何优化首页的加载速度?

  • 异步路由
  • 异步加载
  • 分屏加载
  • 按需加载
  • 延时加载图片
  • cdn
  • 域名拆分

10.ajax、fetch、axios 这三都有什么区别?

  • ajax 是概念 异步交换数据的概念
  • fetch 是浏览器提供的 webAPI 原理是基于 xmlHttpRequest 的封装
  • axios 是第三方库 基于 xmlHttpRequest 的封装 使用更便捷

11.说说你对单向数据流和双向数据流的理解

单向数据流:所有状态的改变可记录、可跟踪,源头易追溯;所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。
双向数据流:无论数据改变,或是用户操作,都能带来互相的变动,自动更新。

原文地址:https://www.cnblogs.com/mybilibili/p/11688482.html

时间: 2024-10-14 17:14:44

[Vue] vue的一些面试题3的相关文章

new Vue/Vue.Component/Vue.extend的区别

刚开始学习Vue时,当我们看到创建Vue实例和创建一个组件时,会发现Vue实例的参数和组件参数是那么的相似:当我们学习路由时, 又发现Vue.extend创建的对象和自定义的组件非常的相似,那么这三者究竟是什么关系呢,对于3个对象了解清楚对后续精准编程很有意义, 因此,我们需要好好的了解一下他们的区别和使用场景 Vue.extend和Vue.component区别比较 运行示例 var PageNotFind = Vue.component("pagenotfind",{templat

requirejs vue vue router简单框架

index.html 入口页面 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>vue</title>     <link href="../css/index.css" rel="stylesheet">     <script 

vue element-ui typescript tree报错 === Property &#39;getCheckedNodes&#39; does not exist on type &#39;Element | Element[] | Vue | Vue[]&#39;.

import { Tree } from 'element-ui' const ref = <Tree>this.$refs.tree ref.getCheckedNodes() vue element-ui typescript tree报错 === Property 'getCheckedNodes' does not exist on type 'Element | Element[] | Vue | Vue[]'. 原文地址:https://www.cnblogs.com/cynthi

Vue ---- vue的基本使用 文本/事件/属性指令 补充: js面向对象 js函数

目录 日考题(知识点)??? 1.http 与 https 2.前端布局 3.orm 大概的大纲?? vue框架??? 1.创建vue实例 2.挂载点 3.data 变量 4.methods 方法 5.插值表达式 6.文本指令 7.事件指令 8.属性指令 9.补充:面向对象js 10.补充:js函数 日考题(知识点)??? 1.http 与 https http 与 tcp : 一个是应用层, 传输层, http 协议传输层采用的是tcp http的特点: 无状态 无连接 先客户端发送请求, 服

[Vue] vue的一些面试题4

1.你知道 nextTick 的原理吗? 用法:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 异步更新队列提到 DOM 的更新是异步执行的,只要数据发生变化,将会开启一个队列,并缓冲在同一事件循环中发生的所有数据变更.如果同一个 watcher 被多次触发,只会被推入到队列中一次. 简单来说,就是当数据发生变化时,视图不会立即更新,而是等到同一事件循环中所有数据变化完成之后,再统一更新视图. 2. 说说你对 v-clock 和 v-pre

vue 20到精选面试题

1.说下Vue数据双向绑定的原理 可以参考https://www.cnblogs.com/wangjiachen666/p/9883916.html 也就是说:输入框内容发生变化时,data中的数据同步发生变化.即view = > model的变化 data中的数据变化时,文本节点的内容同步发生变化.即model = > view的变化 2.说说Vuex的作用以及应用场景 项目数据状态的集中管理,复杂组件(如兄弟组件.远房亲戚组件)的数据通信问题. 3.说说Vue组件的数据通信方式 父传子--

[vue]vue条件渲染v-if(template)和自定义指令directives

条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <div v-show="false">yes</div> <!--<div v-else>no</div>--> <h1>v-for: 判断1</h1> <div v-if="false"&

vue | vue实现列表同时展开与单独展开

需求:每个li标签在点击的时候,都同时展开. 但是碰见几个问题: 1.如果点第一个li 所有li都会展开: 2.点击第一个li,第一个li展开,点击第二个li,第一个li闭合,第二个li展开 这两种情况都与预期不符,我们要求,点击第一个li展开,点击第二个li第一个li不闭合,第二个li展开,依次类推. 1.2是使用了v-show="activeIndex==index"导致的,因为数据是v-for遍历的,而activeIndex不是每个li私有的,是每个li公用的. 那么问题来了,如

[Vue]Vue语法糖

语法糖 :是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发,简化代码是书写. Vue.js的v-bind和v-on指令都提供了语法糖,也可以说是缩写. 1.v-bind可以省略,直接写一个冒号":": <a v-bind:href="url">链接</a> <img v-bind:src="imgUrl"> <!--缩写为:--> <a :href="url&q