目录

导读

1. Vue的优缺点

2. Vue是渐进式框架

3. Vue跟React的异同点？

相同点：

不同点：

4. MVVM是什么？和MVC有何区别呢？

MVC

MVVM

区别

5. Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？

6.Vue的作者

7. 为什么data是个函数并且返回一个对象呢？

8. 使用过哪些Vue的修饰符呢？

9. 使用过哪些Vue的内部指令呢？

1. v-text

2. v-html

3. v-pre

4. v-cloak

5. v-once

6. v-if

7. v-else

8. v-else-if

9. v-show

10. v-for

11. v-bind

12. v-model

10. 组件之间的传值方式有哪些？

11. 路由有哪些模式呢？又有什么不同呢？

12. 如何设置动态class，动态style？

13. v-if和v-show有何区别？

14. computed和watch有何区别？

15. Vue的生命周期

16. 为什么v-if和v-for不建议用在同一标签？

17. vuex的有哪些属性？用处是什么？

18. 不需要响应式的数据应该怎么处理？

19. watch有哪些属性，分别有什么用？

20. 父子组件生命周期顺序

21. 对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？

22. 直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？

23. 自定义指令

24. 插槽的使用以及原理？

25. 为什么不建议用index做key，为什么不建议用随机数做key？

26. 说说nextTick的用处？

27. Vue的SSR是什么？有什么好处？

28. Vue响应式是怎么实现的？

29. 为什么只对对象劫持，而要对数组进行方法重写？

30.Vue.set方法的原理？

31.props怎么自定义验证

32. watch监听一个对象时，如何排除某些属性的监听

33. computed如何实现传参？

34. vue的hook的使用

35. provide和inject是响应式的吗？

36.Vue的el属性和$mount优先级？

37. 动态指令和参数使用过吗？

38. 相同的路由组件如何重新渲染？

39. 自定义v-model

40. 如何将获取data中某一个数据的初始状态？

41.为什么不建议v-for和v-if同时存在

42.计算变量时，methods和computed哪个好？

导读

每个IT开发者都希望自己成为大神，尤其是最近几年流行的vue、react、Angular前端三大框架，大大加快了前端开发者的开发速度，几乎是革命性的改变！而vue框架是现在最火热的，也是使用人数最多的框架，全面的掌握它，便能在成为大神的道路上更进一步。以下是我总结的几乎所有的vue的知识：

1. 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框架，但是不是严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue的ref可以做到这点。

5. Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？

jQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据即可在操作DOM频繁的场景里，jQuery的操作DOM行为是频繁的，而Vue利用虚拟DOM的技术，大大提高了更新DOM时的性能Vue中不倡导直接操作DOM，开发者只需要把大部分精力放在数据层面上Vue集成的一些库，大大提高开发效率，比如Vuex，Router等

6.Vue的作者

尤雨溪

7. 为什么data是个函数并且返回一个对象呢？

data之所以只一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。

8. 使用过哪些Vue的修饰符呢？

9. 使用过哪些Vue的内部指令呢？

1. v-text

v-text主要用来更新textContent，可以等同于JS的text属性。

这两者等价：

{{msg}}

2. v-html

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。

这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。

3. v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

最终仅显示第二个span的内容

4. v-cloak

这个指令是用来保持在元素上直到关联实例结束时进行编译。

在页面加载时会闪烁，先显示:

然后才会编译为：

5. v-once

v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

This will never change:{{msg}} //单个元素

//组件

• {{i}}

上面的例子中，msg,list即使产生改变，也不会重新渲染。

6. v-if

v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

yes

如果属性值ok为true，则显示。否则，不会渲染这个元素。

7. v-else

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

yes

No

8. v-else-if

v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

9. v-show

hello world

也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

注意：v-if有更高的切换开销 v-show有更高的初始渲染开销。 因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

10. v-for

用v-for指令根据遍历数组来进行渲染 有下面两种遍历形式

//使用in，index是一个可选参数，表示当前项的索引

//使用of

下面是一个例子，并且在v-for中，拥有对父作用域属性的完全访问权限。

• {{parent}}-{{item.text}}

会被渲染为：

• 父作用域-文本1
• 父作用域-文本2

注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

11. v-bind

v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。 简写为一个冒号【 ：】

<1>对象语法：

//进行类切换的例子

渲染结果：

<2>数组语法

渲染结果：

<3>直接绑定数据对象

渲染结果：

12. v-model

这个指令用于在表单上创建双向数据绑定。 v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

这个例子中直接在浏览器input中输入别的名字，下面的p的内容会直接跟着变。这就是双向数据绑定。

10. 组件之间的传值方式有哪些？

父组件传值给子组件，子组件使用props进行接收子组件传值给父组件，子组件使用$emit+事件对父组件进行传值组件中可以使用$parent和$children获取到父组件实例和子组件实例，进而获取数据使用$attrs和$listeners，在对一些组件进行二次封装时可以方便传值，例如A->B->C使用$refs获取组件实例，进而获取数据使用Vuex进行状态管理使用eventBus进行跨组件触发事件，进而传递数据使用provide和inject，官方建议我们不要用这个，我在看ElementUI源码时发现大量使用使用浏览器本地缓存，例如localStorage

11. 路由有哪些模式呢？又有什么不同呢？

hash模式：通过#号后面的内容的更改，触发hashchange事件，实现路由切换history模式：通过pushState和replaceState切换url，触发popstate事件，实现路由切换，需要后端配合

12. 如何设置动态class，动态style？

动态class对象：

动态class数组：动态style对象：动态style数组：

13. v-if和v-show有何区别？

v-if是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁v-show是通过控制dom元素的css样式来实现显隐，不会销毁频繁或者大数量显隐使用v-show，否则使用v-if

14. computed和watch有何区别？

computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作简单记就是：一般情况下computed是多对一，watch是一对多

15. Vue的生命周期

16. 为什么v-if和v-for不建议用在同一标签？

在Vue2中，v-for优先级是高于v-if的，咱们来看例子

上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：

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. 自定义指令

详细查看最常用的几个Vue自定义指令

24. 插槽的使用以及原理？

详细请查看教您怎么使用vue的插槽

25. 为什么不建议用index做key，为什么不建议用随机数做key？

举个例子：

list: [

{ name: '小明', id: '123' },

{ name: '小红', id: '124' },

{ name: '小花', id: '125' }

]

渲染为

现在我执行 list.unshift({ name: '小林', id: '122' })

渲染为

新旧对比

可以看出，如果用index做key的话，其实是更新了原有的三项，并新增了小花，虽然达到了渲染目的，但是损耗性能

现在我们使用id来做key，渲染为

现在我执行 list.unshift({ name: '小林', id: '122' })，渲染为

新旧对比

可以看出，原有的三项都不变，只是新增了小林这个人，这才是最理想的结果

用index和用随机数都是同理，随机数每次都在变，做不到专一性，很渣男，也很消耗性能，所以，拒绝渣男，选择老实人

26. 说说nextTick的用处？

举个例子，在vue中：

this.name = '林三心'

this.age = 18

this.gender = '男'

我们修改了三个变量，那问题来了，是每修改一次，DOM就更新一次吗？不是的，Vue采用的是异步更新的策略，通俗点说就是，同一事件循环内多次修改，会统一进行一次视图更新，这样才能节省性能嘛

看懂了上面，那你应该也看得懂下面的例子了吧：

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 去更新(派发更新)。

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.js

const arrayProto = Array.prototype

const 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.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

}

31.props怎么自定义验证

props: {

num: {

default: 1,

validator: function (value) {

// 返回值为true则验证不通过，报错

return [

1, 2, 3, 4, 5

].indexOf(value) !== -1

}

}

}

32. 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;

},

},

}

33. computed如何实现传参？

// html