本文主要总结了一些vue的知识点 , 可供面试和平时学习使用。
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.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等；
5.为什么data是个函数并且返回一个对象呢？
data之所以只一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。
6.使用过哪些Vue的内部指令呢？
7.组件之间的传值方式有哪些？
- 父组件传值给子组件，子组件使用
props进行接收 - 子组件传值给父组件，子组件使用
$emit+事件对父组件进行传值 - 组件中可以使用
$parent和$children获取到父组件实例和子组件实例，进而获取数据 - 使用
$attrs和$listeners，在对一些组件进行二次封装时可以方便传值，例如A->B->C - 使用
$refs获取组件实例，进而获取数据 - 使用
Vuex进行状态管理 - 使用
eventBus进行跨组件触发事件，进而传递数据 - 使用
provide和inject，跨组件传值 - 使用浏览器本地缓存，例如
localStorage
8.路由有哪些模式呢？又有什么不同呢？
- hash模式：通过
#号后面的内容的更改，触发hashchange事件，实现路由切换 - history模式：通过
pushState和replaceState切换url，触发popstate事件，实现路由切换，需要后端配合
9.如何设置动态class，动态style？
- 动态class对象：
- 动态class数组：
- 动态style对象：
- 动态style数组：
10. v-if 和 v-show有何区别?
-
v-if是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁 -
v-show是通过控制dom元素的css样式来实现显隐，不会销毁 - 频繁或者大数量显隐使用v-show，否则使用v-if
11.computed和watch有何区别？
-
computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作 -
watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作 - 简单记就是：一般情况下
computed是多对一，watch是一对多
12.为什么v-if和v-for不建议用在同一标签？
在Vue2中，v-for优先级是高于v-if的，咱们来看例子：
{{item}}
上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：
{{item}}
computed() {
list() {
return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
}
}
13.vuex的有哪些属性？用处是什么？
- State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
- Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
- Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
- Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
- Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
14. 不需要响应式的数据应该怎么处理？
在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。有以下两种方式解决：
//方法一：将数据定义在data之外
data() {
this.boxList = [];
this.doll="多莉";
return {
msg: "hhhhhhh",
};
},
// 方法二：Object.freeze()
data () {
return {
list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx})
}
}
15. watch有哪些属性，分别有什么用？
当我们监听一个基本数据类型时：
watch: {
value () {
// do something
}
}
当我们监听一个引用数据类型时：
watch: {
obj: {
handler () { // 执行回调
// do something
},
deep: true, // 是否进行深度监听
immediate: true // 是否初始执行handler函数
}
}
16. 父子组件生命周期顺序
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
17. 对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？
- 原因：
Object.defineProperty没有对对象的新属性进行属性劫持 - 对象新属性无法更新视图：使用
Vue.$set(obj, key, value)，组件中this.$set(obj, key, value) - 删除属性无法更新视图：使用
Vue.$delete(obj, key)，组件中this.$delete(obj, key)
18. 直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？
原因：Vue没有对数组进行Object.defineProperty的属性劫持，所以直接arr[index] = xxx是无法更新视图的
使用数组的splice方法，arr.splice(index, 1, item)
使用Vue.$set(arr, index, value)
19. 说说nextTick的用处？
我举个例子，在vue中：
this.name = '多莉'
this.age = 18
this.gender = '女'
我们修改了三个变量，那问题来了，是每修改一次，DOM就更新一次吗？不是的，Vue采用的是异步更新的策略，通俗点说就是，同一事件循环内多次修改，会统一进行一次视图更新，这样才能节省性能嘛
下面的例子：
{{name}}
name: '多莉'
this.name = 'Doll'
console.log(this.$refs.testDiv.innerHTML) // 这里是啥呢
答案是“多莉”，前面说了，Vue是异步更新，所以数据一更新，视图却还没更新，所以拿到的还是上一次的旧视图数据，那么想要拿到最新视图数据怎么办呢？
this.name = 'Doll'
this.$nextTick(() => {
console.log(this.$refs.testDiv.innerHTML) // Doll
})
20. Vue的SSR是什么？有什么好处？
-
SSR就是服务端渲染 - 基于
nodejs serve服务环境开发，所有html代码在服务端渲染 - 数据返回给前端，然后前端进行“激活”，即可成为浏览器识别的html代码
-
SSR首次加载更快，有更好的用户体验，有更好的seo优化，因为爬虫能看到整个页面的内容，如果是vue项目，由于数据还要经过解析，这就造成爬虫并不会等待你的数据加载完成，所以其实Vue项目的seo体验并不是很好
21. 如何将获取data中某一个数据的初始状态？
在开发中，有时候需要拿初始状态去计算。例如
data() {
return {
num: 10
},
mounted() {
this.num = 1000
},
methods: {
add() {
// 计算出num增加了多少，那就是1000 - 初始值
// 可以通过this.$options.data().xxx来获取初始值
console.log(this.num + this.$options.data().num)
}
}
21. 计算变量时，methods和computed哪个好？
{{howMuch1()}}
{{howMuch2()}}
{{index}}
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都没变。