28个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.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.组件之间的传值方式有哪些?

1.父组件传值给子组件，子组件使用props进行接收；子组件传值给父组件，子组件使用$emit+事件对父组件进行传值
2.组件中可以使用$parent和schildren获取到父组件实例和子组件实例，进而获取数据。使用sattrs和slisteners，在对一些组件进行二次封装时可以方便传值，例如A->B->c
3.使用$refs获取组件实例，进而获取数据。使用vuex进行状态管理
4.使用eventBus进行跨组件触发事件，进而传递数据
5.使用provide和inject，官方建议我们不要用这个，我在看Elementur源码时发现大量使用
6.使用浏览器本地缓存，例如localstorage

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

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

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

动态class对象:

<div :class="i 'is-active ' :true， 'red ' : isRed }"></div>

·动态class数组：
<div :class=" [ 'is-active ', isRed ? 'red' : "]"></div>
动态style对象:
<div :style="{ color: textcolor，fontSize: '18px’}"></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不建议用在同―标签?

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

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

State:定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter:允许组件从Store 中获取数据，mapGetters辅助函数仅仅是将store 中的getter映射到局部计算属性。
Mutation:是唯―更改store 中状态的方法，且必须是同步函数。
Action:用于提交mutation，而不是直接变更状态，可以包含任意异步操作。.Module:允许将单一的Store：拆分为多个store且同时保存在单—的状态树中。

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

在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。
 

//方法一;将数据定义在data之外
this.list1 = { xxXXXXXXXXXXXXXXXXXXXXXXXXXxXXx }
this.list2 = { xxxXXxXxXXXXXXXxXXXXXXXXXXXXXXxxXxx }
this.list3 = {xxxXXXXXXXXXxxxXXXXXXXXXXXXXxXXx }
this.list4 = {xxxx0xXXxXXxXXxXXXXXXXXXXXXXXXxxx }
this.list5 = { xxxxxxXXXXXXXXXXxXxX0XXXXXXXXXXXxxx }
return f0
//方法二:object.freeze()
return {
list1: Object.freeze(ixxxxXXXXXXXXXXXXXXxxXx}),
list2: Object.freeze({xxxxxXXXXXXXXXXXXXXXxxx}),
list3: object.freeze({xxxxxXXXXXXXXXXXXXXXxxx}),
list4: Object.freeze({xxxxxxXXXXXXXXXXXXXXxXx}),
list5: object.freeze({xxxxxXXXXXXXXXXXXXXxxx}),
}

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，k
ey)

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

原因:Vue没有对数组进行object.defineProperty的属性劫持，所以直接arr[index]= xxx是无法更新视图的。
使用数组的splice方法，arr.splice(index, 1, item)·使用vue.$set( arr, index, value)

23.为什么不建议用index做key，为什么不建议用随机数做key?

用index和用随机数都是同理，随机数每次都在变，做不到专一性，也很消耗性能

24.Vue的SSR是什么?有什么好处?

SSR就是服务端渲染
基于nodejs serve服务环境开发，所有html代码在服务端渲染
数据返回给前端，然后前端进行“激活”，即可成为浏览器识别的html代码
SsR首次加载更快，有更好的用户体验，有更好的seo优化，因为爬虫能看到整个页面的内容，如果是vue项目，由于数据还要经过解析，这就造成爬虫并不会等待你的数据加载完成，所以其实Vue项目的seo体验并不是很好

25. Vue响应式是怎么实现的?

整体思路是数据劫持+观察者模式
对象内部通过defineReactive方法，使用object . defineProperty将属性进行劫持(只
会劫持已经存在的属性)， 数组则是通过重写数组方法来实现。当页面使用对应属性时，
每个属性都拥有自己的dep属性，存放他所依赖的watcher (依赖收集)， 当属性变化后
会通知自己对应的watcher去更新(派发更新)。

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

因为对象最多也就几十个属性，拦截起来数量不多，但是数组可能会有几百几千项，拦截起来非常耗性能，所以直接重写数组原型上的方法，是比较节省性能的方案

27.审查元素时发现data-v-Xxxxx，这是啥?

 <div data-v-811db470e1ass="entry">
<div data-v-811db470 classm"el-cand entry-headers is-always-shadow"..<./div( flex<div data-v-811db47e class=""entry-content">..<./ div> (flex
< / div>
这是在标记vue文件中css时使用scoped标记产生的，因为要保证各文件中的css不相互影响，给每个component都做了唯一的标记，所以每引入一个component就会出现一个新的'data-v-xxx'标记

28.vue的el属性和$mount优先级?

比如下面这种情况，Vue会渲染到哪个节点上

new Vue(i
router,store,
el: "#app",
render: h => h(App)}).$mount( "#ggg")

这是官方的一张图，可以看出el和$mount同时存在时，el优先级> $mount