前端|前端面试八股文--Vue篇（持续更新） javascript|vue.js

一. Vue2 篇 1.MVC MVVM区别首先呢这是两种模式
MVC指的是 modal，view， controller
MVVM 指的是 modal ，view， view modal
mvc和mvvm区别是：1、处理业务的模式不同，MVC里，View是可以直接访问Model，而MVVM是将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现；2、处理数据操作不同，MVVM通过数据来显示视图层而不是节点操作。
2. vue的优点采用MVVM框架，我们只需要关注对数据的修改就好，提供大量api，减少我们对dom的直接操作。采用spa页面，用户体验更佳。减轻服务器压力（服务器不需要发送html页面，只需要发送数据即可）。提供虚拟dom，减轻页面渲染压力。
3. vue组件间传值（1）父传子

props接
（2）子传父

this.$emit("getData",data)
(3) 兄弟传
发布订阅模式
事件总线
4. v-show和v-if 就是是否显示和是否销毁。
实现本质方法区别
v-show本质就是标签display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
【前端|前端面试八股文--Vue篇（持续更新）】编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show都会编译，初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，就不会编译了
性能
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
5. 常见的vue指令 v-on / ：绑定事件
v-for ：循环渲染
v-modal：双向绑定
v-if：显示或者销毁（就是css里的display是不是none的问题）
v-show：是否展示（只是显示或者隐藏，而不是销毁）
v-bind：绑定数据
6. 数据响应式原理（vue2，vue3的与此有差异）在vue2中，对数据的代理主要
什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。
Object.defineProperty 为对象中的每一个属性，设置 get 和 set 方法，每个声明的属性，都会有一个专属的依赖收集器 subs，当页面使用到某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被放到属性的依赖收集器 subs 中，在数据变化时，通知更新；
当数据改变的时候，会触发Object.defineProperty - set函数，数据会遍历自己的依赖收集器 subs，逐个通知 watcher，视图开始更新；
原文链接：https://blog.csdn.net/qq_44182284/article/details/111191455
下面写一个实例
用obj2代理obj1

Document - 锐客网

我们可以看到obj2为

文章图片

除了本身的c：3属性外，还有我们代理的a属性，并且有get和set方法，我们可以在调试工具中修改obj2.a=5

文章图片

此时查看obj1

文章图片

发现obj1的a也变成了5，这就是一波简单的代理。或者我们修改obj1.a=10

文章图片

再查看obj2

文章图片

发现obj2的a也变成了10，这就是双向绑定。
但是该绑定模式在vue2中是有缺点的，他对于数组和对象的修改有时候会出现问题，最典型的就是根据索引修改数组信息或者对象信息。直接修改对于vue来说是不会及时响应的，我们需要的是使用vue.$set(源，索引，修改值)或者$nextTick强制更新才行。
7. vue2 解决修改数组对象时数据代理问题除了上面说到的nextTick和$set，其实vue帮我们重写了数组的那七大方法，例如push，pop，shift，unshift，splice等等。通过这些方法修改数组，vue就可以及时响应并更新页面。
8. data是函数的问题我们自己在连续vue时，在一个html文件中引入vue.js 我们发现data可以是对象的形式，也可以是函数的形式。

Document - 锐客网{{name}}

但是在脚手架中开发时为什么都要使用函数方式呢。
原因是对象是引用数据类型。如果以对象形式写，会造成声明空间的污染，不同组件之间data数据的干扰。所以要使用函数返回的方式。
9.watch和computed的区别计算属性computed :
(1)、支持缓存，只有依赖数据发生改变，才会重新进行计算
(2)、不支持异步，当computed内有异步操作时无效，无法监听数据的变化
(3）、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
(4）、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
(5）、如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
侦听属性watch：
(1)、不支持缓存，数据变，直接会触发相应的操作；
(2)、watch支持异步；
(3)、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
(4)、当一个属性发生变化时，需要执行对应的操作；一对多；
(5)、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新
增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
10. 生命周期（超级重要）生命周期其实就是在vue组件生成挂载以及销毁过程中一系列的关键时间节点，vue给我们提供各种对应时间节点的回调函数（也叫钩子函数）来执行我们需要的逻辑。
直接上图

文章图片

文章图片

通俗来讲，先创建created（主要就是数据初始化），再挂载，也就是mounted（dom操作）。数据更新走updata，销毁组件走destroyed。然后再加上他们的before就是所有的钩子。
这里最常考的就是：对于数据初始化，最好再created钩子里进行，对dom操作，最好再mounted里操作。
还有一些特殊的钩子，比如路由的钩子

//路由的钩子 activated() { this.timer = setInterval(() => { console.log("@"); }, 1000); console.log("被激活了"); }, deactivated() { console.log("不看了",this); clearInterval(this.timer); },

第一个是通过路由进入显示该组件时调用
第二个是通过路由离开该组件时调用
11. 路由基本情况
vue的路由通过监视我们浏览器地址栏的变化决定展示什么组件内容。
分为两种模式：hash模式和history模式
hash模式（默认）：每次点击跳转后我们的地址栏会有一个＃
注意#后的任何数据都不会被发送到服务器。
history模式：每次跳转就和我们普通的页面跳转类似，地址栏后面不会有#，这种情况下的地址会被发送到服务器，在部署时需要特殊解决一下。
路由的基本格式如下

import VueRouter from "vue-router"; import page1 from '../components/Page1' import page2 from '../components/Page2' import page1son from '../pages/Page1son' import page2son from '../pages/Page2son' //默认是hash模式可以设置history const router = new VueRouter({ mode: 'history', routes: [ { name: 'Page1', path: '/Page1', component: page1, children: [ { name: 'page1son', path: 'page1son', component: page1son, // props:{a:11111,b:'ccc'}, // 这样所有param的参数就会以props传过去 // props:true, props() { return { id: ' query.id', title: 'query.title' } }, // //独享路由 // beforeEnter:(to,from,next)=>{// } } ] }, { name: 'page2', path: '/Page2', component: page2, meta: { isAuth: true }, children: [ { path: 'page2son', component: page2son, } ] }, { name: 'selectList', path: '/selectList', component: () => import(/* webpackChunkName: "about" */ '../components/selectList.vue'), } ] }) // 全局前置路由守卫 // router.beforeEach((to, from, next) => { //if (to.meta.isAuth == true) { //alert("需要权限"); //next() //} else { //console.log("路由调用", to, from, next); //next() //} // }) // // 全局后置路由守卫 // router.afterEach((to, from) => { //console.log(to.name, from.name); //document.title=to.name // }) export default router

实现跳转的方式
第一种

page1-child

to就是跳转的地方，下面是跳转后组件展示的区域。
第二种

this.$router.push({ path: "/page1/page1son" });

一个效果，这个就是把地址push到了history的栈里
路由守卫

// 全局前置路由守卫 router.beforeEach((to, from, next) => { if (to.meta.isAuth == true) { alert("需要权限"); next() } else { console.log("路由调用", to, from, next); next() } }) // 全局后置路由守卫 router.afterEach((to, from) => { console.log(to.name, from.name); document.title=to.name })

分为前置守卫，后置守卫
前置守卫负责确定权限或者做一些跳转前的初始化处理，主要三个参数，到哪来，从哪去，能不能继续，能就调用next（）
后置守卫主要就是改个文档标题啥的，不算特别重要。
当然还有组件内置守卫

//组件内路由 beforeRouteEnter(to, from, next) { console.log("刚进", to, from); next(); }, beforeRouteLeave(to, from, next) { console.log("走", to, from); next(); },

很好理解，来之前干嘛，离开前干嘛，只不过是写在组件内的。
12. vuex 主要是状态管理，通俗说就是如果多个组件会处理同一个数据，那么可以用vuex集中管理

文章图片

首先三个状态 Actions Mutations State
Actions主要用来记录组件需要进行的动作，我们可以在里面进行判断等等操作
Mutations负责修改数据，而数据就统一存在State中。
组件调用Actions里的方法时，使用的是dispatch（"函数名",参数）
Actions通知Mutations修改State时，调用的是commit（"函数名",参数）
然后Mutations修改数据
data.sum += value
下面是代码实例
vuex的

import Vuex from 'vuex' import Vue from 'vue' // 用于响应动作 const actions = { increment: function (context, value) { console.log('收到的参数', context, value); context.commit('increment', value) } } // 用于操作数据 const mutations = { increment: function (data, value) { console.log("state中的数据", data, value); data.sum += value }, decrement(data,value){ data.sum-=value } } //用于存储 const state = { sum: 0 } // 加工state中的数据 const getters ={ bigSum(state){ return state.sum*10 } } Vue.use(Vuex) const store = new Vuex.Store({ actions, mutations, state, getters }) // 暴露store export default store

组件中操作

12.vue2双向绑定模拟解释一下为什么会给input标签添加input事件，是因为v-modal本身就只是一个语法糖，它相当于
v-modal="valueA"<=> @input = "valueA=event.target.value"
当然如果是chexkbox它就对应@change事件
它只是帮我们完成修改标签数据的同时修改我们组件的data。

Document - 锐客网

13. 自定义指令直接看例子就懂了（实现指令控制字体颜色）

Document - 锐客网{{name}}

效果图

文章图片

二. Vue3 1. Vue3与Vue2的对比（1）双向数据绑定的原理发生改变
vue2是Object.definpropetry，但是有个缺点就是vue2中的数据代理无法检测通过索引修改的数组，对象变化，不能及时的更新页面。vue3的原理是proxy，一个window自带的api，并且读取数据以及修改数据使用了反射接口，可以更好的检测数组对象的变化。（后面有详细说明）。
（2）标签变化
vue3的模板标签下可以有多个根标签，而vue2只能有一个根标签。
（3）Composition API
Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）
直接给例子
vue2

.father { width: 200px; height: 200px; background-color: bisque; } .slotdemo { width: 200px; height: 200px; background-color: red; }

选项类型api就是需要什么写什么。需要data，就把数据都放在data里，需要定义方法时间，就都写在methods里。
vue3

大家都写在setup大舞台中。
（4）. 生命周期钩子

Vue2--------------vue3
beforeCreate-> setup()
created-> setup()
beforeMount-> onBeforeMount
mounted-> onMounted
beforeUpdate-> onBeforeUpdate
updated-> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed-> onUnmounted
activated-> onActivated
deactivated-> onDeactivated
————————————————
版权声明：本文为CSDN博主「star@星空」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43638968/article/details/108800361

这个就直接复制了，可以看出来比较好理解，除了create都归setup()管以外，其他的就是在2的基础上多了一个on。然后on后第一个字母大写。最后就是destroyed改名为unmount，其实就是卸载的意思，比毁灭销毁贴切点。
2. Vue3数据代理先上示例

Document - 锐客网

可以看出来明显的区别就是，proxy代替Object.defineProperty。获取，设置，删除数据用的都是Reflect反射api。

文章图片

为什么使用反射呢
bject上的一些属性，reflect也有
比如给object定义相同属性名，会导致代码单线程卡住，阻塞下面代码运行
例如让obj代理两个c属性一个是obj1的c。一个是obj2的c。
那么就报错
但是使用反射后，就不会直接保错，而是通过返回的布尔值知道是否成功。
虚拟dom 用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。
我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。
diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。
————————————————
版权声明：本文为CSDN博主「田野啸风」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44439675/article/details/116461376
vue用到的设计模式 1.订阅者发布者模式2.Mvvm3. 工厂模式

vue父组件子组件的生命周期执行顺序 Vue 的父组件和子组件生命周期执行顺序可以理解为以下 4 点：
加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
————————————————
版权声明：本文为CSDN博主「没有码力」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45272820/article/details/120450822

$nextTick有什么用？