什么是vue ?
vue 就是一个js库,是一套构建用户界面的 渐进式框架,并且 无依赖别的js库,跟jQuery差不多,vue得核心库只关注视图层,非常容易与其他库或已有项目整合。vue就是一个轻巧,高性能,可组件化得MVVM 库,代码简洁体积小,运行效率高,适合移动PC端开发
MVVM 的理解
Model-View-ViewModel ,Model表示数据模型层,View表示视图层,ViewModel是View和Model层的桥梁,数据绑定到ViewModel层自动渲染到页面,试图变化通知ViewModel层更新数据
<keep-alive></keep-alive> 的作用是什么
是一个抽象组件,自身不会渲染Dom,也不会出现在父组件链中,使用keep-alive包括动态组件,会缓存不活动的组件实例,而不是销毁。
include 定义缓存白名单,keep-alive会缓存命中的组件;exclude 定义缓存黑名单,被命中的组件将不会被缓存;max 定义缓存组件上限,超出上限使用LRU 的策略置换缓存数据。
vue组件中如何获取DOM元素
使用ref属性获取,在组件模板元素中添加ref属性,在js中使用this.$ref获取
vue中指令有哪些?以及他的用法
v-model 双向数据绑定
v-for 循环
v-if; v-show 显示与隐藏
v-on:事件绑定
v-once:只绑定一次
vue中vi-if和v-show有什么区别
v-if的原理就是根据判断 条件来动态的进行增删DOM元素,比较耗费性能和内存,频繁显示隐藏不建议使用
v-show是根据判断条件来动态显示与隐藏,通过设置样式display为block和none来实现,适用于频繁显示隐藏
vue循环中为什么使用key
需要使用key来给循环中每个节点做一个唯一表示,要保证一个循环中key的值不相同,避免vue中重用机制造成可能的渲染异常,从底层来看,key属性主要是为了DIFF算法就可以正确识别此节点,并搞笑的更新虚拟DOM
vue的组件配置对象中有哪些常用的字段?分别是什么作用?
Data 组件中的数据
props 组件的属性数据,接收父组件的传值
computed:计算属性
components:定义或引用子组件
methods:自定义函数
wacth:属性监听
filters:数据过滤
以及声明周期函数
分别描述computed和watch的使用场景
computed:当一个属性受到多个属性影响的时候需要用到computed。例如购物车商品结算
watch:当一条数据影响多条数据的时候需要用watch.l例如:搜索数据
列举vue 组件声明周期函数,什么时候需要使用destroyed?
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
当前页面有事件监听器或者计时器时,需要在destroyed中取消或销毁
vue路由的钩子函数(路由守卫)有哪些
全局的路由钩子函数:beforeEach、afterEach
单个路由钩子函数:beforeEnter
组件内的路由钩子函数:beforeRouteEnter,beforeRouteLeave,beforeRouteUpdate
介绍vue路由守卫 参数有(to,from,next)
vue 组件中的路由钩子方法:
beforeRouteEnter 进入路由前调用 组件还未创建,不能使用this
beforeRouteUpdate 路由更新前被调用,组件不会重新初始化 可以使用this
beforeRouteLeave 离开路由之前调用 可以访问里面的this属性
三个参数:
to:即将要进入的目标路由对象
from:当前导航即将要离开的路由对象
next:调用该方法,才能进入下一个路由钩子函数
vue中数据绑定如何实现的?
vue组件data中的数据在创建时,都会被改造为set,get类型的属性,当数据发生变化时,set方法就会被调用,set方法中添加了重新渲染的代码
v-model vue数据双向绑定原理
.v-model可以看成是value+input方法的实现
可以自动让原生表单组件的值自动和你选择的值绑定,输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会变化
vue中怎样实现非父子组件之间的传值
在项目规模不是特别大时,可以创建一个空组件作为总线,项目中其他组件都可以通过总线进行传值
大型项目中,可以使用vuex进行数据管理,将数据统一放在store中进行管理
也可以在路由跳转时,通过路由传值
vue 路由如何传值
使用url拼接字符串的形式传值 使用$route.query接收
使用命名路由params字段传值 使用$route.patams接收
使用query对象传值 使用$route.query接收
vue中有哪些数据传递方式
1、组件传值:父子相传,通过props属性或者slot插槽传递,子传父,通过$emit发射自定义事件传递,非父子传值,通过bus总线传递
2、路由传值:通过命名路由params字段传值
3、vuex状态数据管理传值
如何理解vuex
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex
使用场景:单页应用中,组件之间的状态。音乐播放、登陆状态、加入购物车
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 体积更改数据的方法,同步!
actions => 像一个装饰器,包裹 mutations,使之可以异步。
modules => 模块化Vuex
|