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.jQuery的操作DOM行为是频繁的，而Vue利用虚拟DOM的技术，大大提高了更新DOM时的性能
-
3.Vue中不倡导直接操作DOM，开发者只需要把大部分精力放在数据层面上
-
4.Vue集成的一些库，大大提高开发效率，比如Vuex，Router等
6. Vue的作者是谁？大声说出它的名字！！！
他的名字就是：鱿鱼西
7. 为什么data是个函数并且返回一个对象呢？
data之所以只一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。
8. 使用过哪些Vue的修饰符呢？
9. 使用过哪些Vue的内部指令呢？
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对象：
<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-if
14. computed和watch有何区别？
-
1.
computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作 -
2.
watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作 -
3.简单记就是：一般情况下
computed是多对一，watch是一对多
15. Vue的生命周期，讲一讲？
16. 为什么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)
}
}
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. 插槽的使用以及原理？
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的模板编译原理？
31. 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) {
// 判断是否为数组
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
