[Vue] vue的一些面试题4

1.你知道 nextTick 的原理吗?

用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

异步更新队列提到 DOM 的更新是异步执行的,只要数据发生变化,将会开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。

简单来说,就是当数据发生变化时,视图不会立即更新,而是等到同一事件循环中所有数据变化完成之后,再统一更新视图。

2. 说说你对 v-clock 和 v-pre 指令的理解

v-cloak 指令只是在标签中加入一个 v-cloak 自定义属性,在 HTML 还编译完成之后该属性会被删除。
v-pre 可以用来阻止预编译,有 v-pre 指令的标签内部的内容不会被编译,会原样输出。

3.vue 过渡动画实现的方式有哪些?

  • 使用 vue 的 transition 标签结合 css 样式完成动画
  • 利用 animate.css 结合 transition 实现动画
  • 利用 vue 中的钩子函数实现动画

4.vue 父子组件双向绑定的方法有哪些?

  • 利用对象的引用关系来实现
  • 父子组件之间的数据传递
  • 使用.sync 修饰符

5.如何解决 vue 打包 vendor 过大的问题?

  • 在 webpack.base.conf.js 新增 externals 配置,表示不需要打包的文件,然后在 index.html 中通过 CDN 引入
  • 使用路由懒加载

6.vue-loader 是什么?它有什么作用?

解析和转换 .vue 文件,提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template,再分别把它们交给对应的 Loader 去处理。

7.SPA 单页面的实现方式有哪些?

  • 监听地址栏中 hash 变化驱动界面变化
  • 用 pushsate 记录浏览器的历史,驱动界面发送变化
  • 直接在界面用普通事件驱动界面变化

8.说说你对 SPA 单页面的理解,它的优缺点分别是什么?

介绍:SPA 应用就是一个 web 应用,可理解为:是一种只需要将单个页面加载到服务器之中的 web 应用程序。当浏览器向服务器发出第一个请求时,服务器会返回一个 index.html 文件,它所需的 js,css 等会在显示时统一加载,部分页面需要时加载。
优点:

  • 1.良好的交互式体验。意思是:用户无需刷新页面,获取数据通过异步 ajax 获取,页面显示流畅
  • 2.良好的前后端分离模式(MVVM),减轻服务端压力。服务器只需要输出数据就可以,不用管逻辑和页面展示,吞吐能力会提高几倍
  • 3.共用同一套后端程序代码,不用修改就可用于 web 界面,手机和平板等客户端设备

缺点:

  • 1.不利于 SEO 优化
  • 2.由于单页应用在一个页面中显示,所以不可以使用浏览器自带的前进后退功能,想要实现页面切换需要自己进行管理
  • 3.首屏加载过慢(初次加载耗时多)原因是:为了实现单页 web 应用功能及展示效果,在页面初始化的时候就会将 js,css 等统一加载,部分页面在需要时加载。当然也有解决方法。

解决方法:

  • ① 使用路由懒加载
  • ② 开启 Gzip 压缩
  • ③ 使用 webpack 的 externals 属性把不需要的库文件分离出去,减少打包后文件的大小
  • ④ 使用 vue 的服务端渲染(SSR)

举例 spa 应用:网易云音乐、QQ 音乐等

9.v-if 和 v-for 的优先级是什么?如果这两个同时出现时,那应该怎么优化才能得到更好的性能?

v-for 的优先级更高
避免出现这种情况,如果实在需要,则在外嵌套 template,在这一层进行 v-if 判断,然后在内部进行 v-for 循环,避免每次只有 v-if 只渲染很少一部分元素,也需要遍历同级的所有元素

10.为什么 data 属性必须声明为返回一个初始数据对应的函数呢?

对象为引用类型,当重用组件时,由于数据对象都指向同一个 data 对象,当在一个组件中修改 data 时,其他重用的组件中的 data 会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object 的实例),引用地址不同,则不会出现这个问题。

11.watch 怎么深度监听对象变化

‘obj.xx‘: { handler: function(val) {}, deep:true }

12.怎么在 watch 监听开始之后立即被调用?

‘obj.xx‘: { handler: function(val) {}, immediate:true }

13.watch 和 computed 有什么区别?

  • watch 是侦听属性,computed 是计算属性
  • watch 是为了应对复杂的逻辑计算,computed 是对数据的变化作出反应
  • watch 是只有当缓存改变时才执行,computed 是只要从新渲染就会执行
  • watch 有缓存,computed 没有缓存

14.v-show 和 v-if 有什么区别?使用场景分别是什么?

v-show 是 css 的 display 显示和隐藏
v-if 是 DOM 销毁和重建

v-show 使用场景:

  • 频繁的切换显示状态
  • 预渲染需求

15.什么是双向绑定?原理是什么?

通过 Observer 把数据劫持(Object.defineProperty()) 、加入到订阅器(Dep) 订阅器收集订阅者(Watcher )、视图通过编译(Compile)、解析指令(Directive)等一些列操作收集给订阅者 、最后通过触发数据变化 update 通知所有订阅者完成数据驱动

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

时间: 2024-07-29 00:58:43

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

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的一些面试题3

1. vue 组件里的定时器要怎么销毁? 当生命周期销毁后,并没有将组件中的计时器销毁,虽然页面上看不出来,但是如果在控制台打印的话,会发现计时器还在运行,所以要销毁计时器,避免代码一直执行 const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在beforeDestroy钩子可以被清除. this.$once('hook:beforeDestroy', () => { clearInterval(timer

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