1.对MVVM的理解
MVVM事 model-view-viewModel 的缩写
-
model:表示数据,也可以在model中定义数据修改和操作的业务逻辑
-
view:代表UI组件,她复杂讲数据模型转化成UI展示出来
-
viewModel:监听模型数据的改变和控制视图行为,处理用户交互,简单理解就是一个同步view 和model的对象,连接model和view
在MVVM框架下,view和model之间并没有直接的联系,而是通过viewModel进行交互,model和viewmodel之间的交互式相互,是双向的,因此view数据的变化也会同步到model中,而model数据的变化也会立即反应到view中
viewModel 通过双向数据绑定吧view层和model层连接起来,而view 和model 之间的同步工作完全是自动的,无需认为干涉,因此开发中只需要关注业务逻辑,不需要手动操作DOM。
2.vue双向数据绑定的原理
vue实现数据双向绑定的主要是 采用 数据劫持结合发布者-订阅模式的方式
通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时候发布消息给订阅者,触发相应监听回调。
vue的数据双向绑定 讲MVVM作为数据绑定的入口,整合Observer ,Compile 和Watcher 三者
-
通过Observer来监听自己model的数据变化
-
通过Compile来解析编译模版指令(vue中用来解析{{}})
-
最后利用watcher搭起observer和compile之间的通信桥梁,达到数据变化 ====》 视图更新,视图变化 === 》数据model变更的双向绑定效果
3.vue组件之间的参数传递
-
父组件 传递数据给 子组件
-
即父组件通过属性的方式向子组件传值
-
子组件通过props来接收
-
-
子组件 传递数据给 父组件 (通过$emit )
-
在父组件中 定义绑定 handleChange 事件
-
子组件绑定一个事件,通过this.$emit() 来触发父组件中绑定的handleChange 事件
-
-
子组件 传递数据给 父组件 (通过回调函数)
-
先在父组件中定义一个callback函数,并把callback函数传递给子组件
-
在子组件中接收,并执行callback 函数,把需要传递的数据当成callback的实参传递
-
-
子组件 传递数据给 父组件(通过
$parent/$children或者$ref
访问组件实例)-
通过$ref 来访问子组件
-
通过$children来调用子组件的方法
-
-
非父子组件之间的数据传递(兄弟组件传值)
-
可以通过 eventBus,就是创建一个事件中心,相当于中转站,可以用它来接收传递事件和接收事件
-
vuex 状态管理
-
4.v-if 和 v-show的区别
-
v-show 是css display 属性的切换,而v-if是完整的销毁和重新创建
-
当频繁切换的时候 使用 v-show,运用较少的时候 使用v-if
5.什么是生命周期
vue的实例 从创建到 销毁的过程 就是生命周期,或者说从开始创建,初始化数据,编译模版,挂载DOM==》渲染,更新==〉渲染,销毁等一系列过程 称之为生命周期
6.生命周期有什么作用
它的生命周期中有多个事件钩子,让我们在控制整个vue实例的过程中时更容易形成好的逻辑
7.vue的生命周期总共有几个阶段
有8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后
8.第一次页面加载会触发哪几个钩子?
会触发 beforeCreate,creates,beforeMount.mounted
DOM渲染在 mounted 中就已经完成了
9.计算属性computed 和监听watch的区别
-
计算属性:是自动监听依赖值的变化,从而动态返回内容
-
监听:是一个过程,在监听的值 发生改变的时候,可以触发一个回调,并做一些事情
-
computed 和 watch 的区别:
-
缓存:
-
computed 支持缓存,只有依赖数据发生改变,才会重新计算
-
watch不支持缓存,数据变化,直接回触发相应的操作
-
-
同步 异步
-
computed 不支持异步,当computed 内有一步操作时无效,无法监听数据的变化
-
watch支持一步操作
-
-
computed 属性值会默认走缓存,计算属性是基于它们的响应式以来进行缓存的,也就是基于data中声明过 或者父组件传递的prop中的数据通过计算得到的值
-
数据定义的位置
-
computed 的数据不可以定义在data 里面
-
watch 的数据一定要定义在data中
-
-
-
用法区别
-
只是需要动态值 那么就使用计算属性
-
如果需要知道值的变化之后执行业务逻辑,就使用watch
-
10.computed特性
-
是计算属性
-
应用:就是简化template 里面的{{}} 计算和处理 props 或者$emit 的传值
-
具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必在此执行函数
11.watch的特性
-
是观察的动作
-
应用:监听props $emit 或者本组件的值 执行异步操作
-
无缓存性,页面重新渲染时不变化也会执行
12.computed 动态计算的工作流程
-
data 属性初始化 getter setter
-
computed 计算属性初始化,提供的函数将用作属性,vm.reversedMessage 的getter
-
当首次获取 reversedMessage 计算属性的值时,Dep 开始以来收集
-
在执行message getter方法时,如果Dep 处于以来收集状态,则判定message为revserdMessage 的依赖,并建立依赖关系
-
当 message 发生变化时,根据依赖关系,触发reversedMessage 的重新计算
13.vue路由的实现:hash模式 和 history 模式
-
hash模式:在浏览器中 #以及#之后字符称之为 hash
-
history模式:
14.组件中data为什么时一个函数
-
因为组件时用来复用的,js里对象时引用关系,data为一个函数 然后return一个对象,这样作用域就没有隔离
-
而new Vue 的实例,是不会被复用的,因此不存在引用对象的问题
15.说说vue中的动态组件
多个组件通过同一个挂载点进行组件的切换,this的值是哪个组件的名称,那么页面就显示哪个组件
16.递归组件的用法
-
组件是可以在它们自己的模版中调用自身的,不过它们只能通过name 选项来做
-
既然是递归,那么一定要有结束递归的条件,否则就会使用组件循环引用,最终出现栈溢出
-
可以使用v-if="false" 作为递归组件的结束条件,当遇到v-if为false的时候,组件将不会在进行渲染
-
17.keep-alive 内置组件的作用
-
可以在被keep-avlie包裹的组件不经历 创建和销毁,而是直接进入缓存
-
凡事被keep-avlie包裹的组件,除了第一次以外,都不会经历创建和销毁
18.keep-avlie的生命周期
created===》mounted===〉activated===》deactivated
再次进入 只触发 activated
19.vuex 页面刷新数据丢失怎么解决
需要做vuex数据的持久化,一般使用本地储存的方案保存数据
可以使用vuex-persist 插件
20.使用过ssr吗?说说ssr
ssr 也就是服务器渲染,也就是将在客户端把标签渲染成html的工作放在服务端,然后服务端渲染成html结构 直接返回给客户端
-
优点:
-
ssr 有着更好的seo
-
ssr 首屏加载速度更快
-
-
缺点:
-
开发条件会受到限制,服务端渲染只支持 beforeCreate 和 create两个钩子
-
服务器会有更大的负载需求
-
21.vue 中使用了哪些设计模式?
-
工厂模式:传入参数即可创建实例
-
单例模式:整个程序有且只有一个实例
-
vuex 和 vue-router的插件注册方法 install 判断,如果系统有存在的实例就直接返回掉
-
-
发布-订阅者模式:vue事件机制
-
观察者模式:响应式数据原理
-
装饰器模式:@装饰器的用法
-
策略模式:策略模式 指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案
22.都做过哪些 vue的性能优化
-
对象层级不要过深
-
不需要响应式的数据不要放在data中,可以使用object.freeze() 冻结数据
-
v-if 和 v-show 区分场景使用
-
computed 和watch 分场景使用
-
v-for 遍历必须加 key key最好时数据的id值,且避免和v-if 一起使用
-
大数据列表和表格性能优化,虚拟列表/虚拟表格
-
防止内部泄漏,组件销毁后吧全局变量和事件销毁
-
图片懒加载
-
路由懒加载
-
第三方插件按需加载
-
适当采用keep-alive
-
防抖,节流的运用
-
服务器渲染
23.nextTick 使用场景和原理
nextTick 中的回调函数就是在下次DOM 更新循环结束之后执行的延迟回调
在修改数据之后立即使用这个方法,获取更新后的DOM
主要思路就是采用微任务优先的方式调用 一步方法去执行nextTick 包装方法
24.什么时候需要使用nextTick
-
vue生命周期的create() 钩子函数进行的DOM 操作一定要放在vue.nextTick() 的回调函数中
-
在create() 钩子函数执行额时候进行DOM,其实并为进行然和渲染,而此时进行DOM操作无异于徒劳,所以在create函数中操作DOM,一定要将代码放入vue.nextTick() 中
-
-
改变DOM元素的数据后,基于新的DOM 做点什么,对新的DOM 一系列的js操作都需要放进vue.nextTick() 回调函数中
-
在使用某个第三插件时,希望在vue生成DOM动态发生变化时重新应用该插件,也会用到该方法,这个时候需要在nextTick的回调函数中执行重新应用插件的方法
25.vuex 的运行机制
vuex 提供state 来驱动视图,通过dispatch 派发actions,在其中可以做一些异步的操作,然后通过commit来提交mutation,最后mutation来更改state
26.vuex的核心
-
state:基本数据
-
我们可以通过vue的computed获取vuex的state
-
当一个组件需要获取多个状态的时候,将执行额鞋状态都生米高为计算属性会有些重复和冗余,可以使用 mapState 辅助函数帮助我们生成计算属性
-
-
getter:从基本数据派生的数据
-
mutation:提交更改数据的方法,同步
-
提交mutation时更改vuex中的store中状态的唯一方法
-
使用store.commit 方法调用mutation的回调函数
-
-
actions:像一个装饰器,包裹mutation,可以异步
-
actions 提交的是mutation,不是直接更改状态
-
-
modules:模块化vuex
27.keep-alive 使用场景和原理
-
keep-alive 是vue内置的一个组件,可以实现组件的缓存,当组件切换时不会对当前组件进行卸载
-
常用的两个属性,include/exclude,允许组件有条件的进行缓存
-
两个生命周期activated/deactivated,用来得知当前组件是否处理活跃状态
-
keep-alive 运用了LRU算法,选择最近最久为使用的组件予淘汰
-
28.什么是LRU 算法
-
将新数据从尾部插入到 this.keys 中
-
每当缓存命中(缓存被访问),则将数据移到 this.keys 的尾部
-
当 this.keys 满的时候,将头部的数据丢弃
29.Vue3.0 和 2.0 的响应式原理区别
Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化,并且有多达13种拦截方法。
30.Vue3.0 用过吗?了解多少?
-
响应式原理的改变 Vue3.x 使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty。
-
组件选项声明方式 Vue3.x 使用 Composition API setup是Vue3.x新增的一个选项,他是组件内使用Composition API 的入口。
-
模板语法变化 slot 具名插槽语法,自定义指令v-model升级。
-
其他方面的更改 Suspense支持Fragment(多个根节点)和 Protal(在dom其他部分渲染组件内容)组件,针对一些特殊的场景做了处理。基于 treeShaking 优化,提供了更多的内置功能。