Vue

简述下MVVM

MVVM全称是MODEL-VIEW-VIEWMODEL
Vue是以数据为驱动,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,当数据发生变化,DOM也会发生变化
ViewModel是Vue的核心,它是Vue实例。Vue实例的作用域是某个HTML元素
DOMListeners和DataBindings是实现数据双向绑定的关键
DOMListeners监听View层DOM的变化,当发生变化,则Model的数据发生变化
DataBindings监听Model层的数据变化,当数据变化,则View层中DOM发生变化

什么是虚拟DOM

虚拟DOM是Vue和React的核心
它的本质是通过JS模拟DOM树
也就是DOM发生变化时放在JS层来操作,因为操作DOM代价很大。
虚拟DOM不会立即操作浏览器DOM,提升浏览器的性能

Vue的生命周期

开始创建-编译模板-挂载DOM-  渲染-更新-渲染

beforeCreat在实例初始化之后,此刻data和el是undefined
created实例创建完成,完成了data的初始化,el还是为undefined
beforeMounted挂载之前调用,完成data和el的初始化,把data和模板生成虚拟DOM,还没挂载到HTML中
mounted挂载完成,把虚拟DOM渲染到真实的DOM中,此时可以ajax操作
beforeUpdate,update数据data变化时候自动执行的钩子函数
beforeDestroy
destroyed 组件销毁时自动执行的钩子函数,主要执行定时器销毁等操作

简单概述下keep-alive,需要注意哪些问题

包囊动态组件,起到缓存作用,防止路由跳转发送额外服务器请求重新渲染页面
注意问题:、每次进入新页面时,需要activated判断是否向服务器请求数据。、exclude 匹配的组件都不会缓存,exclude=‘组件名’

什么是计算属性和方法调用有什么区别

模板内使用表达式非常方便,但是只能用于简单运算,而且计算属性可以完成复杂的逻辑运算。
计算属性只要依赖的数据发生变化时就会重新计算,具有缓存功能
而且方法调用在每次render之后都会执行,不具备缓存功能

v-if和v-show的区别

v-if和v-show是隐藏元素的
v-if是真正的条件渲染,也就是说销毁创建DOM让元素隐藏显示
v-show是通过display的css来控制隐藏显示

vue常用的修饰符

.lazy
.number
.trim
事件修饰符
stop/prevemt/capture/self/once/passive
按键修饰符
keyup.enter/tab/delete/esc/space/up/down/left/right

v-on可以监听多个方法吗

可以
<input @input @blur @focus />

vue中的key值作用

提供key来给每个节点做一个唯一标识,Diff算法正确的识别此节点,找到正确的位置重新渲染
key的主要作用是提高虚拟DOM的渲染

Vue组件中data为什么必须是函数

这样每个实例的data都是独立的,不会相互影响,这是js本身特性带来的。
返回唯一的对象,保证组件间数据不会互相影响

Vue组件间如何传值

父-子   通过prop
子-父 通过$emit
组件间使用vuex

更新数组触发视图更新的方法有哪些

数组的变异方法
push/pop/shift/unshift/sort/splice/reverse

Vue中对象更改检测的注意事项

Vue无法检测以下发生变化的数组
、利用索引直接设置一个项 vm.item[index] = value
、修改数组长度 vm.item.length = newLength
对象更改注意事项
、Vue无法检测到对象的属性添加删除 解决方案
、Vue.set(vm.items,index,newValue) / vm.items.splice(index, , newValue)
、vm.items.splice(newLength)
、Vue.set(object, key, value) / vm.$set(object, key, value)

Vue单页面的优缺点

优点:
无刷新,提升用户体验
完全的前端组件化
缺点:
SEO差
首屏加载慢

scoped的作用

CSS只能在当前组件中起作用

mixin

主要作用是实现组件间  数据和方法的复用

Vuex

手写一个vuex

import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex) const state = { count : } const mutations = { 'SET_COUNT': (state, count) => { state.count=count } } const actions = { setCount: ({commit}, count) => (commit('SET_COUNT'), count } const store = new Vuex.Store({
state,
mutations,
actions
}) export default store

Vuex是什么

主要作用是存储组件间的数据状态
State:Vuex中的单一状态树,一个应用只有一个store
Getter:跟计算属性一样,返回的值根据它的依赖缓存起来,只要它的依赖发生改变时才会重新计算
Mutations:同步的,而且时唯一改变store数据的地方
Actions:异步的,不能直接修改store中的数据,只能提交给mutation
Module:将store分割成模块,每个模块有自己的state,mutations,actions

使用场景

单页面应用/音乐播放器/登录状态/购物车

Vuex模块化如何实现,组件如何引用

Vue-Router

手写一个vue-router

、定义组件  或者import
Const Foo ={template:‘<div> foo</div>’ }
Const Bar ={template:‘<div> bar</div>’ }
、定义路由 每个路由映射一个组件
Const routes = [
{path:’/foo’,component:Foo},
{path:’/bar,component: Bar },
]
、创建ruoter实例
Const router = new VueRouter({routers})
、挂载
Const app = new Vue({
router}).$mount(‘#app’)

动态路由如何书写,组件如何接受动态路由参数

动态路由以冒号开头
Const routes=[{path:’/user/:id’,component:User},]
可以通过this.$route.params.id获取到

Vue面试题的更多相关文章

  1. 2019前端面试系列——Vue面试题

    Vue 双向绑定原理        mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter.getter,在数 ...

  2. php开发面试题---vue面试题(vue.js的好处及作用)

    php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...

  3. Vue 面试题汇总

    Vue 面试题汇总 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  4. 【前端面试】Vue面试题总结(持续更新中)

    Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...

  5. 法门扫地僧总结vue面试题(部分来源网络)

    Front-End 前端开发工程师面试宝典!   (本文部分有转载,不定期更新!)             前言(README.md) 本仓库是我整理的前端常见面试题,大部分由我整理,其中个别部分参考 ...

  6. Vue面试题整理

    1:什么是MVVM MVVM是是Model-View-ViewModel的缩写,Model代表数据模型,定义数据操作的业务逻辑,View代表视图层,负责将数据模型渲染到页面上,ViewModel通过双 ...

  7. vue面试题总汇

    active-class是哪个组件的属性? vue-router模块的router-link组件. 嵌套路由怎么定义? 在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我 ...

  8. vue面试题!!!

    由于公司需要,需要把项目拆分,前端使用vue框架.最近面试vue总结的试题 1:mvvm框架是什么?它和其他框架的区别是什么? mvvm 全称model view viewModel,model数据模 ...

  9. 本人编写的一份前端vue面试题

    说明,此题目本人自出,做过本人所在公司的前端面试题,在此共享给大家 1. 如何在vue组件中实现v-model的功能?(只需给出关键代码) 2. 简述你知道的生命周期函数和执行时机 3. 谈谈你对计算 ...

  10. vue面试题,知识点汇总(有答案)

    一. Vue核心小知识点 1.vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态 ...

随机推荐

  1. tensorFlow(六)应用-基于CNN破解验证码

    TensorFlow基础见前博客 简介 传统的验证码识别算法一般需要把验证码分割为单个字符,然后逐个识别.本教程将验证码识别问题转化为分类的问题,实现对验证码进行整体识别. 步骤简介 本教程一共分为四 ...

  2. linux 安装【jdk、tomcat】查看对外开放端口(防火墙拦截处理)

    1.安装 jdkhttps://www.cnblogs.com/xu-dong/p/6422938.html 查看Linux下查看JDK安装路径: https://www.cnblogs.com/im ...

  3. C#获取程序运行时间

    需要用到System.Diagnostics名称空间中的Stopwatch类! Stopwatch类其中有一个属性ElapsedMilliseconds.该属性是获取当前运行时间,以毫秒为单位! 其中 ...

  4. js--------1.时间

    //获取当前时间 yyyy-MM-dd function getNowFormatDate() { var date = new Date(); var seperator1 = "-&qu ...

  5. js文本转语音

    百度找了好多,大概分为两种,一种使用百度语音的API,另一种使用H5自带(低版本不兼容) 下面为一个模拟页面 <!DOCTYPE html><html lang="en&q ...

  6. TP5 强制下载PDF

    为什么叫强制下载  因为你点击你的PDF文件路劲的话   浏览器是默认字网页上打开,而不是下载 我们需要做的就是 修改header头信息  使其变为下载状态 //下载PDF public functi ...

  7. 蓝牙协议分析(11)_BLE安全机制之SM

    1. 前言 注1:此SM是Security Manager的缩写,非彼SM,大家不要理解歪了! 书接上文,我们在“蓝牙协议分析(10)_BLE安全机制之LE Encryption”中介绍了BLE安全机 ...

  8. JUnit4测试报错:class not found XXX

     初学java框架,最近用eclipse跟着视频坐淘淘商城这个项目,其中使用了JUnit4做单元测试.当运行测试代码时,项目报错:class not found xxx. 借助了其他大神的博客,论坛等 ...

  9. Dart Map<> 添加 元素

    Map<String, WidgetBuilder> routesList() { Map<String, WidgetBuilder> re = new Map<Str ...

  10. 解决ansible上传速度慢的问题

    问题: 假如有A.B.C.D....等机器,机器A为Ansible服务器,机器B.C.D...等为Ansible管理的节点服务器,A机器与其他机器都不在同一个网络,也就是A机器必须添加VPN之后才能与 ...