IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue面试题必看! -> 正文阅读

[JavaScript知识库]vue面试题必看!

vue面试题

1.vue.js的两个核心是什么?

数据驱动和组件系统
数据驱动:ViewModel,保证数据和视图的一致性。
组件系统:应用类UI可以看作全部是由组件树构成的。

2.双向数据绑定的原理?

vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()
来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。

3. v-if和v-show有什么区别?

v-show 仅仅控制元素的显示方式,将display属性在block和none来回切换;而v-if会控制这个Dom节点的存在与否。
当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐 藏时,使用v-if更加合理。

4. methods,computed和watch的区别?

methods:重要重新渲染,method调用总会执行该函数。

computed:相当于一个具备缓存的watcher,计算属性是根据它的相关依赖进行缓存,只有它的相关依赖发生改变,它才会重新求值。

Watch:没有缓存性,更多的是观察的作用,可以监听某些数据执行回调。
当我们需要深度监听是需要用:deep:true
初始化监听:immediate:true

5. 说?下你对单向数据流的理解?

单向数据流主要是vue 组件间传递数据是单向的,即数据总是由父组件传递给子组件,子组件在其内部维护自己的数据,但它无权修改父组件传递给它的数据,当开发者尝试这样做的时 候,vue 将会报错。这样做是为了组件间更好的维护。在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据的子组件发生变化,所以 vue 不推荐子组件修改父组件的 数据。

6.data为什么是一个函数?

避免组件中的数据互相影响,同一个组件被复用多次后会创建多个实例,如果data是一个对象的话,这些实例用的都是同一个构造函数。这样就会影响到所有的实例,所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。

7. vue中 keep-alive 组件的作用

作用
用于保留组件状态或避免重新渲染(缓存的作用)
比如
当一个目录页面与一个详情页面,用户经常:打开目录页面=>进入详情页面=>返回目录页面=>打 开详情页面,这样目录页面就是一个使用频率很高的页面,那么就可以对目录组件使用 <keep-alive></keep-alive> 进行缓存,这样用户每次返回目录时,都能从缓存中快速渲染,而不用重新渲染。

1、属性:
include:字符串或正则表达式。只有匹配的组件会被缓存。
exclude:字符串或正则表达式。任何匹配的组件都不会被缓存。
2、两个生命周期:
activateddeactivated
用来得知当前组件是否处于活跃状态
3、用法:
包裹动态组件时,会缓存不活动的组件实例,?不是销毁它们。和 <transition>相似,<keep- alive>是?个抽象组件:它?身不会渲染?DOM 元素,也不会出现在?组件链中。

当组件在<keep-alive> 内被切换,在 2.2.0 及其更?版本中,activated 和 deactivated? 命周期 将会在 树内的所有嵌套组件中触发。

8.ref的作用?

  1. 获取dom元素:this.$ref.box
  2. 获取子组件中的this:this.$refs.box.msg
  3. 调用子组件中的方法:this.$refs.box.open()

9.params和query的区别?

  1. 引入方式不同: query要使用path来引入,params要使用name来引入,接受参数格式类似,引用分别是this.$route.query.name和this.$route.params.name
  2. 形成的路径不同(或者url地址显示不同): 使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求。
    params传递后形成的路径: /router/123,/router/zhangsan query传递后形成的路径:
    /router?id=666&name=zhangsan
  3. 是否受动态路径参数影响 Query传递的参数不会受路径参数的影响,会全部展示到路径上,刷新不会丢失query里面的数据; params传递的参数会受路径参数的影响,只会展示含有动态路径参数的部分,刷新会丢失没有设置动态路径参数的params的数据。

10.谈谈你对MVVM开发模式的理解?

MVVM分为Model、View、Viewmodel三者
Model:代表数据模型,数据和业务逻辑都在Model层中定义;
View:代表UI视图,负责数据的展开;
ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;
总结: Model和View并无直接关联,而且通过Viewmodel来进行联系的,Model和Viewmodel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作dom。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-23 11:22:20  更:2021-09-23 11:24:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:09:49-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码