前言
大家好，我是林三心，这几天产生了很多事（具体是啥我就不说了），这些事，吓得我把我这些年收藏的Vue知识点都拿进去整顿了一遍，巴不得能多总结出一道是一道，我拿出了我的笔记，并且使劲回顾，终于悟出了这50道知识点（咱不要太俗哈，不叫面试题，咱叫知识点）
光荣黄金
1. Vue的长处？Vue的毛病？
长处：渐进式，组件化，轻量级，虚构dom，响应式，单页面路由，数据与视图离开
毛病：单页面不利于seo，不反对IE8以下，首屏加载工夫长
2. 为什么说Vue是一个渐进式框架？
渐进式：艰深点讲就是，你想用啥你就用啥，咱也不强求你。你想用component就用，不必也行，你想用vuex就用，不必也能够
3. Vue跟React的异同点？
相同点：
- 1.都应用了虚构dom
- 2.组件化开发
- 3.都是单向数据流(父子组件之间，不倡议子批改父传下来的数据)
- 4.都反对服务端渲染
不同点：
- 1.React的JSX，Vue的template
- 2.数据变动，React手动(setState)，Vue主动(初始化已响应式解决，Object.defineProperty)
- 3.React单向绑定，Vue双向绑定
- 4.React的Redux，Vue的Vuex
4. MVVM是什么？和MVC有何区别呢？
MVC
- Model(模型)：负责从数据库中取数据
- View(视图)：负责展现数据的中央
- Controller(控制器)：用户交互的中央，例如点击事件等等
- 思维：Controller将Model的数据展现在View上
MVVM
- VM：也就是View-Model，做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，行将后端传递的数据转化成所看到的页面。实现的形式是：数据绑定。二是将【视图】转化成【模型】，行将所看到的页面转化成后端的数据。实现的形式是：DOM 事件监听。
- 思维：实现了 View 和 Model 的主动同步，也就是当 Model 的属性扭转时，咱们不必再本人手动操作 Dom 元素，来扭转 View 的显示，而是扭转属性后该属性对应 View 层显示会主动扭转（对应Vue数据驱动的思维）
区别
整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不必再用选择器操作 DOM 元素。因为在 MVVM 中，View 不晓得 Model 的存在，Model 和 ViewModel 也察看不到 View，这种低耦合模式进步代码的可重用性
Vue是不是MVVM框架？
Vue是MVVM框架，然而不是严格合乎MVVM，因为MVVM规定Model和View不能间接通信，而Vue的ref能够做到这点
5. Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？
- 1.jQuery是间接操作DOM，Vue不间接操作DOM，Vue的数据与视图是离开的，Vue只须要操作数据即可
- 2.在操作DOM频繁的场景里，jQuery的操作DOM行为是频繁的，而Vue利用虚构DOM的技术，大大提高了更新DOM时的性能
- 3.Vue中不提倡间接操作DOM，开发者只须要把大部分精力放在数据层面上
- 4.Vue集成的一些库，大大提高开发效率，比方Vuex，Router等
6. Vue的作者是谁？大声说出它的名字！！！
他的名字就是：鱿鱼西
永恒钻石
7. 为什么data是个函数并且返回一个对象呢？
data之所以只一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，能够防止多处调用之间的数据净化。
8. 应用过哪些Vue的修饰符呢？
能够看我这篇文章「百毒不侵」面试官最喜爱问的13种Vue修饰符
9. 应用过哪些Vue的外部指令呢？
10. 组件之间的传值形式有哪些？
- 父组件传值给子组件，子组件应用
props进行接管 - 子组件传值给父组件，子组件应用
$emit+事件对父组件进行传值 - 组件中能够应用
$parent和$children获取到父组件实例和子组件实例，进而获取数据 - 应用
$attrs和$listeners，在对一些组件进行二次封装时能够不便传值，例如A->B->C - 应用
$refs获取组件实例，进而获取数据 - 应用
Vuex进行状态治理 - 应用
eventBus进行跨组件触发事件，进而传递数据 - 应用
provide和inject，官网倡议咱们不要用这个，我在看ElementUI源码时发现大量应用 应用浏览器本地缓存，例如
localStorage11. 路由有哪些模式呢？又有什么不同呢？
- hash模式：通过
#号前面的内容的更改，触发hashchange事件，实现路由切换 history模式：通过
pushState和replaceState切换url，触发popstate事件，实现路由切换，须要后端配合12. 如何设置动静class，动静style？
- 动静class对象：
<div :class="{ 'is-active': true, 'red': isRed }"></div> - 动静class数组：
<div :class="['is-active', isRed ? 'red' : '' ]"></div> - 动静style对象：
<div :style="{ color: textColor, fontSize: '18px' }"></div> 动静style数组：
<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>13. v-if和v-show有何区别？
- 1.
v-if是通过管制dom元素的删除和生成来实现显隐，每一次显隐都会使组件从新跑一遍生命周期，因为显隐决定了组件的生成和销毁 - 2.
v-show是通过管制dom元素的css款式来实现显隐，不会销毁 3.频繁或者大数量显隐应用
v-show，否则应用v-if14. computed和watch有何区别？
- 1.
computed是依赖已有的变量来计算一个指标变量，大多数状况都是多个变量凑在一起计算出一个变量，并且computed具备缓存机制，依赖值不变的状况下其会间接读取缓存进行复用，computed不能进行异步操作 - 2.
watch是监听某一个变量的变动，并执行相应的回调函数，通常是一个变量的变动决定多个变量的变动，watch能够进行异步操作 3.简略记就是：个别状况下
computed是多对一，watch是一对多15. Vue的生命周期，讲一讲？
16. 为什么v-if和v-for不倡议用在同一标签？
在Vue2中，
v-for优先级是高于v-if的，咱们来看例子<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3"> {{item}}</div>下面的写法是
v-for和v-if同时存在，会先把7个元素都遍历进去，而后再一个个判断是否为3，并把3给暗藏掉，这样的害处就是，渲染了无用的3节点，减少无用的dom操作，倡议应用computed来解决这个问题：<div v-for="item in list"> {{item}}</div>computed() { list() { return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3) }}17. vuex的有哪些属性？用途是什么？
- State：定义了利用状态的数据结构，能够在这里设置默认的初始状态。
- Getter：容许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到部分计算属性。
- Mutation：是惟一更改 store 中状态的办法，且必须是同步函数。
- Action：用于提交 mutation，而不是间接变更状态，能够蕴含任意异步操作。
Module：容许将繁多的 Store 拆分为多个 store 且同时保留在繁多的状态树中。
至尊星耀
18. 不须要响应式的数据应该怎么解决？
在咱们的Vue开发中，会有一些数据，从始至终都未曾扭转过，这种死数据，既然不扭转，那也就不须要对他做响应式解决了，不然只会做一些无用功耗费性能，比方一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式解决，那会耗费大量性能。
// 办法一：将数据定义在data之外data () { this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } return {} } // 办法二：Object.freeze()data () { return { list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), } }19. watch有哪些属性，别离有什么用？
当咱们监听一个根本数据类型时：
watch: { value () { // do something }}当咱们监听一个援用数据类型时：
watch: { obj: { handler () { // 执行回调 // do something }, deep: true, // 是否进行深度监听 immediate: true // 是否初始执行handler函数 }}20. 父子组件生命周期程序
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
21. 对象新属性无奈更新视图，删除属性无奈更新视图，为什么？怎么办？
- 起因：
Object.defineProperty没有对对象的新属性进行属性劫持 - 对象新属性无奈更新视图：应用
Vue.$set(obj, key, value)，组件中this.$set(obj, key, value) 删除属性无奈更新视图：应用
Vue.$delete(obj, key)，组件中this.$delete(obj, key)22. 间接arr[index] = xxx无奈更新视图怎么办？为什么？怎么办？
- 起因：Vue没有对数组进行
Object.defineProperty的属性劫持，所以间接arr[index] = xxx是无奈更新视图的 - 应用数组的splice办法，
arr.splice(index, 1, item) 应用
Vue.$set(arr, index, value)23. 自定义指令
倡议看这篇文章8个十分实用的Vue自定义指令
24. 插槽的应用以及原理？
倡议看我这篇文章「Vue源码学习」你真的晓得插槽Slot是怎么“插”的吗
25. 为什么不倡议用index做key，为什么不倡议用随机数做key？
举个例子：
<div v-for="(item, index) in list" :key="index">{{item.name}}</div>list: [ { name: '小明', id: '123' }, { name: '小红', id: '124' }, { name: '小花', id: '125' }]渲染为<div key="0">小明</div><div key="1">小红</div><div key="2">小花</div>当初我执行 list.unshift({ name: '小林', id: '122' })渲染为<div key="0">小林</div><div key="1">小明</div><div key="2">小红</div><div key="3">小花</div>新旧比照<div key="0">小明</div> <div key="0">小林</div><div key="1">小红</div> <div key="1">小明</div><div key="2">小花</div> <div key="2">小红</div> <div key="3">小花</div>能够看出，如果用index做key的话，其实是更新了原有的三项，并新增了小花，尽管达到了渲染目标，然而损耗性能当初咱们应用id来做key，渲染为<div key="123">小明</div><div key="124">小红</div><div key="125">小花</div>当初我执行 list.unshift({ name: '小林', id: '122' })，渲染为<div key="122">小林</div><div key="123">小明</div><div key="124">小红</div><div key="125">小花</div>新旧比照 <div key="122">小林</div><div key="123">小明</div> <div key="123">小明</div><div key="124">小红</div> <div key="124">小红</div><div key="125">小花</div> <div key="125">小花</div>能够看出，原有的三项都不变，只是新增了小林这个人，这才是最现实的后果用
index和用随机数都是同理，随机数每次都在变，做不到专一性，很渣男，也很耗费性能，所以，回绝渣男，抉择老实人26. 说说nextTick的用途？
我举个例子，在vue中：
this.name = '林三心'this.age = 18this.gender = '男'咱们批改了三个变量，那问题来了，是每批改一次，DOM就更新一次吗？不是的，Vue采纳的是
异步更新的策略，艰深点说就是，同一事件循环内屡次批改，会对立进行一次视图更新，这样能力节俭性能嘛
看懂了下面，那你应该也看得懂上面的例子了吧：
<div ref="testDiv">{{name}}</div>name: '小林'this.name = '林三心'console.log(this.$refs.testDiv.innerHTML) // 这里是啥呢答案是“小林”，后面说了，Vue是异步更新，所以数据一更新，视图却还没更新，所以拿到的还是上一次的旧视图数据，那么想要拿到最新视图数据怎么办呢？
this.name = '林三心'this.$nextTick(() => { console.log(this.$refs.testDiv.innerHTML) // 林三心})27. Vue的SSR是什么？有什么益处？
SSR就是服务端渲染- 基于
nodejs serve服务环境开发，所有html代码在服务端渲染 - 数据返回给前端，而后前端进行“激活”，即可成为浏览器辨认的html代码
SSR首次加载更快，有更好的用户体验，有更好的seo优化，因为爬虫能看到整个页面的内容，如果是vue我的项目，因为数据还要通过解析，这就造成爬虫并不会期待你的数据加载实现，所以其实Vue我的项目的seo体验并不是很好
最强王者
28. Vue响应式是怎么实现的？
整体思路是数据劫持+观察者模式
对象外部通过 defineReactive 办法，应用 Object.defineProperty 将属性进行劫持（只会劫持曾经存在的属性），数组则是通过重写数组办法来实现。当页面应用对应属性时，每个属性都领有本人的 dep 属性，寄存他所依赖的 watcher（依赖收集），当属性变动后会告诉本人对应的 watcher 去更新(派发更新)。
想具体理解过程，倡议浏览我的Vue源码解析系列
const { arrayMethods } = require('./array')class Observer { constructor(value) { Object.defineProperty(value, '__ob__', { value: this, enumerable: false, writable: true, configurable: true }) if(Array.isArray(value)) { value.__proto__ = arrayMethods this.observeArray(value) } else { this.walk(value) } } walk(data) { let keys = Object.keys(data) for(let i = 0; i < keys.length; i++) { const key = keys[i] const value = data[key] defineReactive(data, key, value) } } observeArray(items) { for(let i = 0; i < items.length; i++) { observe(items[i]) } }}function defineReactive(data, key, value) { const childOb = observe(value) const dep = new Dep() Object.defineProperty(data, key, { get() { console.log('获取值') if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value }, set(newVal) { if (newVal === value) return observe(newVal) value = newVal dep.notify() } })}function observe(value) { if (Object.prototype.toString.call(value) === '[object Object]' || Array.isArray(value)) { return new Observer(value) }}function dependArray(value) { for(let e, i = 0, l = value.length; i < l; i++) { e = value[i] e && e.__ob__ && e.__ob__.dep.depend() if (Array.isArray(e)) { dependArray(e) } }}// array.jsconst arrayProto = Array.prototypeconst arrayMethods = Object.create(arrayProto)const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort']methodsToPatch.forEach(method => { arrayMethods[method] = function (...args) { const result = arrayProto[method].apply(this, args) const ob = this.__ob__ var inserted switch (method) { case 'push': case 'unshift': inserted = args break; case 'splice': inserted = args.slice(2) default: break; } if (inserted) ob.observeArray(inserted) ob.dep.notify() return result }})29. 为什么只对对象劫持，而要对数组进行办法重写？
因为对象最多也就几十个属性，拦挡起来数量不多，然而数组可能会有几百几千项，拦挡起来十分耗性能，所以间接重写数组原型上的办法，是比拟节俭性能的计划
30. Vue的模板编译原理？
因为这个问题讲起来可能比拟长，所以：
倡议看我这篇「Vue源码学习(二)」你不晓得的-模板编译原理
31. Vue的computed和watch的原理？
因为这个问题讲起来可能比拟长，所以：
倡议看我这篇「Vue源码学习(四)」立志写一篇人人都看的懂的computed，watch原理
32. Vue.set办法的原理？
function set(target, key, val) { // 判断是否是数组 if (Array.isArray(target)) { // 判断谁大谁小 target.length = Math.max(target.length, key) // 执行splice target.splice(key, 1, val) return val } const ob = target.__ob__ // 如果此对象没有不是响应式对象，间接设置并返回 if (key in target && !(key in target.prototype) || !ob) { target[key] = val return val } // 否则，新增属性，并响应式解决 defineReactive(target, key, val) return val}33. Vue.delete办法的原理？
function del (target, key) { // 判断是否为数组 if (Array.isArray(target)) { // 执行splice target.splice(key, 1) return } const ob = target.__ob__ // 对象自身就没有这个属性，间接返回 if (!(key in target)) return // 否则，删除这个属性 delete target[key] // 判断是否是响应式对象，不是的话，间接返回 if (!ob) return // 是的话，删除后要告诉视图更新 ob.dep.notify()}34. nextTick的原理？
let callbacks = []; //回调函数let pending = false;function flushCallbacks() { pending = false; //把标记还原为false // 顺次执行回调 for (let i = 0; i < callbacks.length; i++) { callbacks[i](); }}let timerFunc; //先采纳微工作并依照优先级优雅降级的形式实现异步刷新if (typeof Promise !== "undefined") { // 如果反对promise const p = Promise.resolve(); timerFunc = () => { p.then(flushCallbacks); };} else if (typeof MutationObserver !== "undefined") { // MutationObserver 次要是监听dom变动 也是一个异步办法 let counter = 1; const observer = new MutationObserver(flushCallbacks); const textNode = document.createTextNode(String(counter)); observer.observe(textNode, { characterData: true, }); timerFunc = () => { counter = (counter + 1) % 2; textNode.data = String(counter); };} else if (typeof setImmediate !== "undefined") { // 如果后面都不反对 判断setImmediate timerFunc = () => { setImmediate(flushCallbacks); };} else { // 最初降级采纳setTimeout timerFunc = () => { setTimeout(flushCallbacks, 0); };}export function nextTick(cb) { callbacks.push(cb); if (!pending) { pending = true; timerFunc(); }}35. key有什么用？说说diff算法吧？
间接看这篇吧：为什么 Vue 中不要用 index 作为 key？（diff 算法详解）
我讲的没他好
冷门的知识点
36. 如果子组件扭转props里的数据会产生什么
扭转的props数据是根本类型
如果批改的是根本类型，则会报错
props: { num: Number,}created() { this.num = 999}扭转的props数据是援用类型
props: { item: { default: () => ({}), }}created() { // 不报错，并且父级数据会跟着变 this.item.name = 'sanxin'; // 会报错，跟根底类型报错一样 this.item = 'sss'},
37. props怎么自定义验证
props: { num: { default: 1, validator: function (value) { // 返回值为true则验证不通过，报错 return [ 1, 2, 3, 4, 5 ].indexOf(value) !== -1 } } }38. watch的immediate属性有什么用？
比方平时created时要申请一次数据，并且当搜寻值扭转，也要申请数据，咱们会这么写：
created(){ this.getList()},watch: { searchInputValue(){ this.getList() }}应用immediate齐全能够这么写，当它为true时，会初始执行一次
watch: { searchInputValue:{ handler: 'getList', immediate: true }}39. watch监听一个对象时，如何排除某些属性的监听
上面代码是，params产生扭转就从新申请数据，无论是a，b，c，d属性扭转
data() { return { params: { a: 1, b: 2, c: 3, d: 4 }, }; },watch: { params: { deep: true, handler() { this.getList; }, }, }然而如果我只想要a，b扭转时从新申请，c，d扭转时不从新申请呢？
mounted() { Object.keys(this.params) .filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听 .forEach((_) => { this.$watch((vm) => vm.params[_], handler, { deep: true, }); }); },data() { return { params: { a: 1, b: 2, c: 3, d: 4 }, }; },watch: { params: { deep: true, handler() { this.getList; }, }, }40. 审查元素时发现data-v-xxxxx，这是啥？
这是在标记vue文件中css时应用scoped标记产生的，因为要保障各文件中的css不相互影响，给每个component都做了惟一的标记，所以每引入一个component就会呈现一个新的'data-v-xxx'标记
41. computed如何实现传参？
// html<div>{{ total(3) }}// jscomputed: { total() { return function(n) { return n * this.num } }, }42. vue的hook的应用
同一组件中应用
这是咱们罕用的应用定时器的形式
export default{data(){ timer:null },mounted(){ this.timer = setInterval(()=>{ //具体执行内容 console.log('1'); },1000);}beforeDestory(){ clearInterval(this.timer); this.timer = null;}}下面做法不好的中央在于：得全局多定义一个timer变量，能够应用hook这么做：
export default{methods:{ fn(){ let timer = setInterval(()=>{ //具体执行代码 console.log('1'); },1000); this.$once('hook:beforeDestroy',()=>{ clearInterval(timer); timer = null; }) }}}7.2 父子组件应用
如果子组件须要在mounted时触发父组件的某一个函数，平时都会这么写：
//父组件<rl-child @childMounted="childMountedHandle"/>method () {childMountedHandle() {// do something...}},// 子组件mounted () {this.$emit('childMounted')},应用hook的话能够更不便：
//父组件<rl-child @hook:mounted="childMountedHandle"/>method () {childMountedHandle() {// do something...}},
43. provide和inject是响应式的吗？
// 先人组件provide(){ return { // keyName: { name: this.name }, // value 是对象能力实现响应式，也就是援用类型 keyName: this.changeValue // 通过函数的形式也能够[留神，这里是把函数作为value，而不是this.changeValue()] // keyName: 'test' value 如果是根本类型，就无奈实现响应式 } },data(){ return { name:'张三'} }, methods: { changeValue(){ this.name = '扭转后的名字-李四' } } // 后辈组件 inject:['keyName'] create(){ console.log(this.keyName) // 扭转后的名字-李四}44.Vue的el属性和$mount优先级？
比方上面这种状况，Vue会渲染到哪个节点上
new Vue({ router, store, el: '#app', render: h => h(App)}).$mount('#ggg')这是官网的一张图，能够看出el和$mount同时存在时，el优先级>$mount
45. 动静指令和参数应用过吗？
<template> ... <aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />...</template><script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dbclick", someProps: someCondition ? "num" : "price" } }, methods: { handleSomeEvent(){ // handle some event } } </script>46. 雷同的路由组件如何从新渲染？
开发人员常常遇到的状况是，多个路由解析为同一个Vue组件。问题是，Vue出于性能起因，默认状况下共享组件将不会从新渲染，如果你尝试在应用雷同组件的路由之间进行切换，则不会产生任何变动。
const routes = [ { path: "/a", component: MyComponent }, { path: "/b", component: MyComponent },];如果仍然想从新渲染，怎么办呢？能够应用key<template> <router-view :key="$route.path"></router-view></template>47. 自定义v-model
默认状况下，v-model 是 @input 事件侦听器和 :value 属性上的语法糖。然而，你能够在你的Vue组件中指定一个模型属性来定义应用什么事件和value属性——十分棒！
export default: { model: { event: 'change', prop: 'checked' }}48. 如何将获取data中某一个数据的初始状态？
在开发中，有时候须要拿初始状态去计算。例如
data() { return { num: 10 },mounted() { this.num = 1000 },methods: { howMuch() { // 计算出num减少了多少，那就是1000 - 初始值 // 能够通过this.$options.data().xxx来获取初始值 console.log(1000 - this.$options.data().num) } }49.为什么不倡议v-for和v-if同时存在
<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3"> {{item}}</div>下面的写法是v-for和v-if同时存在，会先把7个元素都遍历进去，而后再一个个判断是否为3，并把3给暗藏掉，这样的害处就是，渲染了无用的3节点，减少无用的dom操作，倡议应用computed来解决这个问题：
<div v-for="item in list"> {{item}}</div>computed() { list() { return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3) } }50.计算变量时，methods和computed哪个好？
<div> <div>{{howMuch1()}}</div> <div>{{howMuch2()}}</div> <div>{{index}}</div></div>data: () { return { index: 0 } }methods: { howMuch1() { return this.num + this.price } }computed: { howMuch2() { return this.num + this.price } }computed会好一些，因为computed会有缓存。例如index由0变成1，那么会触发视图更新，这时候methods会从新执行一次，而computed不会，因为computed依赖的两个变量num和price都没变。
结语
如果你感觉此文对你有一丁点帮忙，点个赞，激励一下林三心哈哈。
想进摸鱼群的，看我个人资料，加我，我拉你进，定时会议模仿面试，答疑解惑