问:说⼀下vue最⼤特点是什么或者说vue核⼼是什么
答:vue最大特点我感觉就是“组件化“和”数据驱动“
组件化就是可以将页面和页面中可复用的元素都看做成组件,写页面的过程,就是写组件,然 后页面是由这些组件“拼接“起来的组件树
数据驱动就是让我们只关注数据层,只要数据变化,页面(即视图层)会自动更新,至于如何 操作dom,完全交由vue去完成,咱们只关注数据,数据变了,页面自动同步变化了,很方便
问:Vue 组件中 data 为什么必须是函数
答:组件中的data
写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data
,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data
,就会造成一个变了全都会变的结果。
问:vue 的双向绑定的原理是什么
答:vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程: 我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监 听器 Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者 Watcher 看是 否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器 Dep 来专门收集这 些订阅者,然后在监听器 Observer 和订阅者 Watcher 之间进行统一管理的。接着,我们还 需要有一个指令解析器 Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化 成一个订阅者 Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者 Watcher 接收 到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下 3 个步骤,实现数据的双向绑定: 1.实现一个监听器 Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。 2.实现一个订阅者 Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。 3.实现一个解析器 Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据 以及初始化相应的订阅器
问:说一下MVVM的理解
答:MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数 据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组 件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。 在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化 会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务 逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态 维护完全由 MVVM 来统一管理。
问:说一下vue生命周期以及使用场景
答:vue生命周期即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建, 挂载,更新,销毁
创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destroyed 我平时用的比较多的钩了是created和mounted,created用于获取后台数据,mounted用于dom挂 载完后做一些dom操作,以及初始化插件等.beforeDestroy用户清除定时器以及解绑事件等, 另外还新增了使⽤内置组件 keep-alive 来缓存实例,⽽不是频繁创建和销毁(开销⼤) actived 实例激活 deactived 实例失效
生命周期钩子的一些使用方法: beforecreate : 可以在这加个 loading 事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束 loading 事件,异步请求也适宜在这里 调用 mounted : 挂载元素,获取到 DOM 节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作 dom
问:说⼀下vue组件通讯(即传值)有哪⼏种形式,具体分别是如何实现的
答:vue组件通讯大致有三种:父传子,子传父,还有兄弟之间通讯
第一种:父传子:主要通过props来实现的 具体实现:父组件通过import引入子组件,并注册,在子组件标签上添加要传递的属性,子组 件通过props接收,接收有两种形式一是通过数组形式[‘要接收的属性’ ],二是通过对象形式{ } 来接收,对象形式可以设置要传递的数据类型和默认值,而数组只是简单的接收
第二种:子传父:主要通过$emit来实现 具体实现:子组件通过通过绑定事件触发函数,在其中设置this.$emit(‘要派发的自定义事 件’,要传递的值),$emit中有两个参数一是要派发的自定义事件,第二个参数是要传递的值 然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的 默认值,就是传递过来的参数
第三种:兄弟之间传值有两种方法:
方法一:通过event bus实现 具体实现:创建一个空的vue并暴露出去,这个作为公共的bus,即当作两个组件的桥梁,在两个 兄弟组件中分别引入刚才创建的bus,在组件A中通过bus.$emit(’自定义事件名’,要发送的值) 发送数据,在组件B中通过bus.$on(‘自定义事件名‘,function(v) { //v即为要接收的值 })接 收数据
方法二:通过vuex实现 具体实现:vuex是一个状态管理工具,主要解决大中型复杂项目的数据共享问题,主要包括 state,actions,mutations,getters 和 modules 5 个 要 素 , 主 要 流 程 : 组 件 通 过 dispatch 到 actions,actions是异步操作,再actions中通过commit到mutations,mutations再通过逻辑操作改 变state,从而同步到组件,更新其数据状态
问:vue 等单页面应用(spa)及其优缺点
答:优点: Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心 是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块 友好;即第一次就将所有的东西都加载完成,因此,不会导致页面卡顿。
缺点: 不支持低版本的浏览器,最低只支持到 IE9;不利于 SEO 的优化(如果要支持 SEO, 建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的 导航按钮需要自行实现前进、后退
问:说⼀下vue中methods,computed,watch的区别:
答:methods中都是封装好的函数,无论是否有变化只要触发就会执行
computed:是vue独有的特性计算属性,可以对data中的依赖项再重新计算,得到一个新值,应 用到视图中,和methods本质区别是computed是可缓存的,也就是说computed中的依赖项没有变化, 则computed中的值就不会重新计算,
而methods中的函数是没有缓存的。Watch是监听data和计算属 性中的新旧变化
问:vue 中 key 值的作用
答:使用 key 来给每个节点做一个唯一标识 key 的作用主要是为了高效的更新虚拟 DOM。另外 vue 中在使用相同标签名元素的过渡切换 时,也会使用到 key 属性,其目的也是为了让 vue 可以区分它们, 否则 vue 只会替换其内部属性而不会触发过渡效果。
问:$route 和 $router 的区别是什么?
答:$router 为 VueRouter 的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。 $route 是路由信息对象或跳转的路由对象,每一个路由都会有一个 route 对象,是一个局部 对象,包含 path,params,hash,query,fullPath,matched,name 等路由信息参数。
问:怎么定义 vue-router 的动态路由?怎么获取传过来的 值?
动态路由的创建,主要是使用 path 属性过程中,使用动态路径参数,以冒号开头,参数值会被设置到 this.$route.params 下,所以通过这个属性 可以获取动态参数 this.$route.params.id
问:Vue 的路由实现
答:hash 模式和 history 模式
hash 模式 在浏览器中符号“#”,#以及#后面的字符称之为 hash,用 window.location.hash 读取; 特点:hash 虽然在 URL 中,但不被包括在 HTTP 请求中;用来指导浏览器动作,对服务端安 全无用,hash 不会重加载页面。
history 模式 history 采用 HTML5 的新特性;如果你使用 history 的话,改变路由的时候,后台会给你响应; 且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改, 以及 popState 监听浏览器历史记录变化,但是 pushState(),replaceState()不会触发该函数。
问:vue 路由的钩子函数(导航守卫)
第一种:全局导航钩子 router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
第二种:组件内的钩子; beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave
第三种:单独路由独享组件。 beforeEnter
每个钩子方法接收三个参数:
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参 数。
问:路由传参的方式
答:使用 Params: 只能使用 name,不能使用 path 参数不会显示在路径上 浏览器强制刷新参数会被清空
使用 Query: 参数会显示在路径上,刷新不会被清空 name 可以使用 path 路径
问.说⼀下你对vuex的理解:
答:vuex是一个状态管理工具,主要解决大中型复杂项目的数据共享问题,主要包括 state,actions,mutations,getters 和 modules 5 个 要 素 , 主 要 流 程 : 组 件 通 过 dispatch 到 actions,actions是异步操作,再actions中通过commit到mutations,mutations再通过逻辑操作改 变state,从而同步到组件,更新其数据状态,而getters相当于组件的计算属性对,组件中获取到的 数据做提前处理的.再说到辅助函数的作用.