vue插槽面试题_梳理Vue常考面试题

1 对于MVVM的理解

MVVM是Model-View-ViewModel缩写也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型View代表UI组件ViewModel是View和Model层的桥梁数据会绑定到viewModel层并自动将数据渲染到页面中视图变化的时候会通知viewModel层更新数据。

MVVM 是 Model-View-ViewModel 的缩写

Model: 代表数据模型也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层因为它仅仅关注数据本身不关心任何行为

View: 用户操作界面。当ViewModel对Model进行更新的时候会通过数据绑定更新到View

ViewModel 业务逻辑层View需要什么数据ViewModel要提供这个数据View有某些操作ViewModel就要响应这些操作所以可以说它是Model for View.

总结 MVVM模式简化了界面与业务的依赖解决了数据频繁更新。MVVM 在使用当中利用双向绑定技术使得 Model 变化时ViewModel 会自动更新而 ViewModel 变化时View 也会自动变化。

2 请详细说下你对vue生命周期的理解

答总共分为8个阶段创建前/后载入前/后更新前/后销毁前/后

生命周期是什么

Vue 实例有一个完整的生命周期也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程我们称这是Vue的生命周期

各个生命周期的作用

生命周期

描述beforeCreate

组件实例被创建之初组件的属性生效之前

created

组件实例已经完全创建属性也绑定但真实dom还没有生成$el还不可用

beforeMount

在挂载开始之前被调用相关的 render 函数首次被调用

mounted

el 被新创建的 vm.$el 替换并挂载到实例上去之后调用该钩子

beforeUpdate

组件数据更新之前调用发生在虚拟 DOM 打补丁之前

update

组件数据更新之后

activited

keep-alive专属组件被激活时调用

deadctivated

keep-alive专属组件被销毁时调用

beforeDestory

组件销毁前调用

destoryed

组件销毁后调用

由于Vue会在初始化实例时对属性执行getter/setter转化所以属性必须在data对象上存在才能让Vue将它转换为响应式的。Vue提供了$set方法用来触发视图更新

export default {

data(){

return {

obj: {

name: 'fei'

}

}

},

mounted(){

this.$set(this.obj, 'sex', 'man')

}

}

什么是vue生命周期

答 Vue 实例从创建到销毁的过程就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程称之为 Vue 的生命周期。

vue生命周期的作用是什么

答它的生命周期中有多个事件钩子让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段

答它可以总共分为8个阶段创建前/后、载入前/后、更新前/后、销毁前/销毁后。

第一次页面加载会触发哪几个钩子

答会触发下面这几个beforeCreate、created、beforeMount、mounted 。

DOM 渲染在哪个周期中就已经完成

答DOM 渲染在 mounted 中就已经完成了

3 Vue实现数据双向绑定的原理Object.defineProperty()

vue实现数据双向绑定主要是采用数据劫持结合发布者-订阅者模式的方式通过 Object.defineProperty() 来劫持各个属性的settergetter在数据变动时发布消息给订阅者触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时Vue 将遍历它的属性用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter但是在内部它们让 Vue追踪依赖在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口整合ObserverCompile和Watcher三者通过Observer来监听自己的model的数据变化通过Compile来解析编译模板指令vue中是用来解析 { {}}最终利用watcher搭起observer和Compile之间的通信桥梁达到数据变化 —>视图更新视图交互变化input—>数据model变更双向绑定效果。

4 Vue组件间的参数传递

父组件与子组件传值

父组件传给子组件子组件通过props方法接受数据

子组件传给父组件 $emit 方法传递参数

非父子组件间的数据传递兄弟组件传值

eventBus就是创建一个事件中心相当于中转站可以用它来传递事件和接收事件。项目比较小时用这个比较合适虽然也有不少人推荐直接用VUEX具体来说看需求

5 Vue的路由实现hash模式 和 history模式

hash模式在浏览器中符号“#”#以及#后面的字符称之为hash用 window.location.hash 读取。特点hash虽然在URL中但不被包括在HTTP请求中用来指导浏览器动作对服务端安全无用hash不会重加载页面。

history模式history采用HTML5的新特性且提供了两个新方法 pushState() replaceState()可以对浏览器历史记录栈进行修改以及popState事件的监听到状态变更

5 vue路由的钩子函数

首页可以控制导航跳转beforeEachafterEach等一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数tofromnext。

toroute即将进入的目标路由对象。

fromroute当前导航正要离开的路由。

nextfunction一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

6 vuex是什么怎么使用哪种功能场景使用它

只用来读取的状态集中放在store中 改变状态的方式是提交mutations这是个同步的事物 异步逻辑应该封装在action中。

在main.js引入store注入。新建了一个目录store… export

场景有单页应用中组件之间的状态、音乐播放、登录状态、加入购物车

stateVuex 使用单一状态树,即每个应用将仅仅包含一个store 实例但单一状态树和模块化并不冲突。存放的数据状态不可以直接修改里面的数据。

mutationsmutations定义的方法动态修改Vuex 的 store 中的状态或数据

getters类似vue的计算属性主要用来过滤一些数据。

actionactions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action

modules项目特别复杂的时候可以让每一个模块拥有自己的state、mutation、action、getters使得结构非常清晰方便管理

7 v-if 和 v-show 区别

答v-if按照条件是否渲染v-show是display的block或none

8 $route和$router的区别

$route是“路由信息对象”包括pathparamshashqueryfullPathmatchedname等路由信息参数。

而$router是“路由实例”对象包括了路由的跳转方法钩子函数等

9 如何让CSS只在当前组件中起作用?

将当前组件的

10 的作用是什么?

keep-alive可以实现组件缓存当组件切换时不会对当前组件进行卸载

包裹动态组件时会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染

比如有一个列表和一个详情那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面那么就可以对列表组件使用进行缓存这样用户每次返回列表的时候都能从缓存中快速渲染而不是重新渲染

常用的两个属性include/exclude允许组件有条件的进行缓存

两个生命周期activated/deactivated用来得知当前组件是否处于活跃状态

11 指令v-el的作用是什么?

提供一个在页面上已存在的 DOM元素作为 Vue实例的挂载目标.可以是 CSS 选择器也可以是一个 HTMLElement 实例,

12 在Vue中使用插件的步骤

采用ES6的import ... from ...语法或CommonJS的require()方法引入插件

使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

13 请列举出3个Vue中常用的生命周期钩子函数?

created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见

mounted: el被新创建的 vm.$el 替换并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素当 mounted被调用时 vm.$el 也在文档内。

activated: keep-alive组件激活时调用

14 vue-cli 工程技术集合介绍

问题一构建的 vue-cli 工程都到了哪些技术它们的作用分别是什么

vue.jsvue-cli工程的核心主要特点是 双向数据绑定 和 组件系统。

vue-routervue官方推荐使用的路由框架。

vuex专为 Vue.js 应用项目开发的状态管理器主要用于维护vue组件间共用的一些 变量 和 方法。

axios 或者 fetch 、ajax 用于发起 GET 、或 POST 等 http请求基于 Promise 设计。

vuex等一个专为vue设计的移动端UI组件库。

创建一个emit.js文件用于vue事件机制的管理。

webpack模块加载和vue-cli工程打包器。

问题二vue-cli 工程常用的 npm 命令有哪些

下载 node_modules 资源包的命令

npm install

启动 vue-cli 开发环境的 npm命令

npm run dev

vue-cli 生成 生产环境部署资源 的 npm命令

npm run build

用于查看 vue-cli 生产环境部署资源文件大小的 npm命令

npm run build --report

在浏览器上自动弹出一个 展示 vue-cli 工程打包后 app.js、manifest.js、vendor.js 文件里面所包含代码的页面。可以具此优化 vue-cli 生产环境部署的静态资源提升 页面 的加载速度

15 NextTick

nextTick可以让我们在下次 DOM 更新循环结束之后执行延迟回调用于获得更新后的 DOM

16 vue的优点是什么

低耦合。视图View可以独立于Model变化和修改一个ViewModel可以绑定到不同的"View"上当View变化的时候Model可以不变当Model变化的时候View也可以不变

可重用性。你可以把一些视图逻辑放在一个ViewModel里面让很多view重用这段视图逻辑

可测试。界面素来是比较难于测试的而现在测试可以针对ViewModel来写

17 路由之间跳转

声明式标签跳转

编程式 js跳转

router.push('index')

18 实现 Vue SSR

其基本实现原理

app.js 作为客户端与服务端的公用入口导出 Vue 根实例供客户端 entry 与服务端 entry 使用。客户端 entry 主要作用挂载到 DOM 上服务端 entry 除了创建和返回实例还进行路由匹配与数据预获取。

webp