vue

vue 面试

v-if 和v-for 哪个优先级更高?如果两个同时出现，应该怎么优化得到更好的性能?

源码中找答案compiler/codegen/index.js

两者不同级时，渲染函数如下

(function anonymous(){
with(this){return _c('div',{attrs:{"id":"demo"}},[_v("v-for和v-if谁的优先级更高？ 应该")]),_v(""),
(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e(),2)}
})

如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费性能

要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环

2.谈一下你对MVVM原理的理解？

什么是MVVM？

Model-View-ViewModel 是一种软件设计模式，它是一种简化用户界面的事件驱动编程方式。
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信的，而viewModel就是定义了一个Observer观察者。
ViewModel是连接View和Model的桥梁。
 viewModel能够观察到数据的变化，并对视图对应的内容进行更新。
 ViewModel能够监听到视图的变化，并能够通知数据发生变化。
 Vue.js就是MVVVM的实现者，它的核心就是实现了DOM监听与数据绑定。
 MVVM源自经典的MVC模式，MVVM模式的核心就是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用是
 该层向上与视图层进行双向数据绑定。 向下与Model层通过接口请求进行数据交互。

为什么要使用MVVM？
低耦合：视图可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View发生变化的时候Model可以不变，当Model变化的时候，View也可以不变。
可复用：可以把一些视图逻辑放到一个ViewModel里面，让很多的View重用了这段视图逻辑
独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

3.请说一下响应式数据的原理？

核心点：Object.defineProperty

默认vue在初始化数据时，会给data中的属性使用Object.defineProperty重新定义所有属性，当页面取到对应属性时。会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作。 在获取和设置的时候 我们可以增加自己的逻辑 这个逻辑就叫做依赖收集

vue中是如何检测数组变化？

使用函数劫持的方式，重写了数组的方法

7种方法会更改数组

push  pop 移除删除数组中最后一个元素  shift 删除数组中第一个元素 
unshift添加元素在数组的开头  splice添加删除元素 sort排序数组 reverse反转数组

01.谈谈你对vue的一个理解

渐进式的JavaScript框架  
核心库加插件
动态创建用户界面
特点：
mvvm模式， 代码简洁  体积小，能够 提高运行效率
适合Pc端和移动端的开发    本身只关注ui  和react相似  
可以轻松引入vue插件以及其他的第三方库进行开发  
------------------  前提  数据绑定、虚拟dom
vue是借鉴了angular的模板、数据绑定技术、借鉴了React的组件化和虚拟dom技术 

viewModel 连接 Model和view之间的一个桥梁 ，数据发生改变更新时，通过view Model通知view来进行一个视图层的展示改变 ，同时如果视图层发生改变时 也会通过viewModel通知Model层来改变数据

2.view是如何实现响应式数据的呢？

当数据改变后 vue会通知到使用该数据的代码 视图渲染使用了一个数据 数据改变后 试图会响应是否自动更新 通过Objecy.defineProperty来更新定义data中的所有属性 使数据的获取 设置get and set增加一个拦截的功能 拦截属性的获取进行一个依赖的收集 拦截属性的更新操作 进行一个通知

3.vue中如何检测数组变化？

引起数组变化的方法7种方法 只要执行了 那么他就会改变数组内容 然后更新这些操作就行了

4.怎么去响应监测这个数组变化？ 使用函数劫持的方法 重写了数组方法 具体就是改变了数组的原型(改变了自己的) 用户调用数组的一些方法的时候 走的就是我自己的方法 通知视图层去更新 数组种的每一项可能是对象 那么我们就会对数组的每一项进行观测 并且只有数组里面的对象才能进行观测 观测过的就不会再观测了 vue3中直接监听对象数组的变化

5.Vue的事件绑定原理

​ 哪两种 分别采用什么实现的 第一种是元素的dom事件的绑定 addEvenListener实现 第二种就是组件的绑定事件 采用的是\(on方法 元素dom的绑定它一个具体 就是Vue在创建真实dom的时候 它是会调用createEml 它默认会调用这个invokeCreateHooks 它是会遍历当前平台上相对应的属性 然后进行一个处理代码 其中就有一个updateDomLIstener的方法，内部传入的就是add方法 如果要解释 组件绑定事件 vue它是通过自定义的\)on方法实现的

6.v-model种的实现原理 以及如何自定义v-model

首先解释一下 v-model 我们可以把它看成value加Input方法的语法糖 原生v-model它是会根据标签的不同 生成不同的事件还有属性 然后解析一个指令出来 自定义写自己的Model属性 可以在里面放prop 还要event

7.为什么vue它是异步渲染的？

vue它是一个组件级更新的 所以如果它不采用异步更新的话 那么每次更新数组 他都会对当前的组件进行一个重新渲染 为了性能的话 它是会在本轮数据更新后再异步更新视图的 核心思想就是nextTick nextTick就是一个异步方法 它是异步渲染的最后一步 它里面利用的就是宏任务和微任务 来构建的一个异步方法 宏任务 setTimeout 微任务 是Promise这种 多次调用nextTick它是会存入一个队列的 每次 他都会通过这个异步的方法然后来清空这个队列 达到了那个异步更新的效果

---

---

v-model

v-model如果为了不同元素绑定数据，则使用不同的元素property，并抛出不同的事件 
v-model本质上是语法糖，它负责监听用户的输入事件以更新数据  
对input使用v-model，实际上是指定其：value和input事件
----修饰符
 lazy修饰符让内容在“change”事件时而非“input”事件时更新
 v-model添加number修饰符，可以自动将用户的输入值转为数值类型
 可以给v-model添加trim修饰符，自动过滤用户输入的首尾空白字符
 v-model添加number修饰符，如果这个值无法被parseFloat()解析，则会返回原始的值

生命周期

vue的生命周期的钩子函数中mounted和beforeDestroy中都可以获取到DOM元素  
beforeMount\destroyed钩子函数不可以直接获取DOM元素 

vue2 和vue3

vue3的组合API中的setup()方法包含了所有的基本内容，包括了生命周期，可以在setup()中使用生命周期钩子函数
vue3中Template支持多个根标签，vue2不支持
vue3中的生命周期的挂载钩子是OnMounted，需要引入才能使用
vue3引入了tree-shaking,以模块的方式引入api,减少打包体积

vuex

vuex的属性有state\mutations\actions\getters\module
vuex可以用来管理数据 vuex也可以实现组件间的传值 
mutation中的方法按照规定最好不要涉及异步的方法

vue使用虚拟DOM的特点

Virtual DOM是以JavaScript对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node等
虚拟节点可以理解成成节点描述对象，他描述了因该怎么样去创建真实的DOM节点
虚拟DOM优势：渲染引擎操作DOM慢，JS运行效率高，于是将DOM对比操作放在JS层，提高了效率
提升渲染性能Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新

webpack配置

module.rules可以指定多个loader，而loader的作用是对模块的源码进行转换
plugin是一个具有apply方法的javascript对象，由于plugin可以携带参数，所以必须在配置中向plugins属性传入一个实例
模块热替换会在程序运行中，替换、添加、删除模块，无需重新加载整个页面，无需更替所有模块。
webpack开始处理程序时，从入口开始递归构建一个依赖关系图，包含了程序所需的模块，然后大包围少量的bundle，通常只有一个bundle

自定义指令的钩子函数

自定义指令钩子函数参数“el”指所绑定的元素，可以直接操作DOM元素。如修改绑定元素的字体颜色：el.style.color='red'
被绑定元素插入父节点时调用inserted函数 
bind函数只调用一次，指令第一次绑定到元素时调用
组件的Vnode更新时调用update函数

vue中，哪个选项对数组的操作不会触发视图的更新

concat()返回一个新的数组，还需要用新数组替换原数组才能实现视图的更新 

keep-alive可以同include属性，匹配要进行缓存的组件
当组件在keep-alive内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行
keep-alive自身不会渲染一个DOM元素，也不会出现在组件的父组件链中 
max属性控制最多可以缓存多少组件实例，一旦这个数字达到了，在新势力被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉

Vue 的父组件和子组件生命周期钩子执行顺序是什么

父组件；beforeCreate->created->beforeMount
子组件：->beforeCreate->created->beforeMount->mounted
父组件：->mounted   从外到内， 再从内到外 

vue生命周期理解

vue实例从创建到销毁的过程就是生命周期 即制 从创建、初始化数据、编译模板、挂载DOM到渲染 更新到渲染、销毁等一系列过程  注意分为8个阶段  创建前后 载入前后 更新前后 销毁前 销毁后  以及一些特殊场景的生命周期  
    beforeCreate  组件实例被创建之初  created 组件实例已经完全创建   beforeMount 组件挂载前  mounted 组件挂载到实例上去之后  beforeUpdate 组件数据发生变化，更新之前  updated 数据更新之后   beforeDestroy 组件实例销毁之前  destroyed 组件实例销毁之后  actived  keep-alive缓存的组件激活时   deactivated kepp-alive缓存的组件停用时调用 errorCaptured 捕获一个来自子孙组件的错误时调用