Vue2面试题

说一下Vue优缺点？

优：渐进式，组件化，轻量级，虚拟dom，响应式（渐进式的意思是想用哪些功能随你）

缺：单页面不利于seo，不支持IE8以下，首屏加载时间长

淘汰掉Jquery就是因为直接操作DOM繁琐、性能问题

Vue与React的异同点？

同：虚拟dom、组件化、单向数据流、支持服务端渲染

异：React使用JSX，Vue使用template；React手动(setState)，Vue自动(初始化已响应式）；React单向绑定，Vue双向绑定；React的Redux，Vue的Vuex；fiber暂不熟悉

说一下MVVM是什么？和MVC的区别？

M是model模型、也就是数据；V是view视图；也就是DOM看到的页面；VM是他们的桥梁、也就是Vue实例、负责通知数据变化更新视图。

MVVM和MVC的区别也就是VM和C的区别；C是Controller控制器、需要手动控制数据在视图层的显示、VM则实现双向数据绑定。

我理解就是MVVM不用直接操作dom，是呀虚拟dom加快页面渲染速度

路由模式以及不同点？

hash模式：通过#号后面的内容的更改，触发hashchange事件、实现路由切换

history模式：通过pushState和replaceState切换url、触发popstate事件、实现路由切换

使用过哪些Vue的修饰符呢？使用过哪些Vue的内部指令呢？

列举几个常见的：.trim、.number、.prevent、.once、v-pre、v-cloak

v-text是更新元素的textContent、v-html是更新元素的innerHTML

v-model可以由哪两个指令代替？

:value ="message" @input ="message = $event.target.value"

v-if和v-show的区别和使用场景？

v-show 是控制元素的dispaly:none属性

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for和v-if的优先级？谁在外层？

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

所以一般把v-if写在外层

为什么data是个函数？

为了不让数据起冲突，data是函数，每次调用这个函数拿到的返回值互不影响

Vue2的双向数据绑定原理？

利用Object.defineProperty实现的、Vue在初始化数据的时候，会使用Object.defineProperty重新定义给data中所有属性加getter/setter，当页面使用对应属性时，首先进行依赖收集（收集当前组件的watcher），如果属性发生变化会通知相关依赖进行更新操作（发布订阅🧡）

Vue中数据代理？

• 通过vm对象来代理data对象中属性的操作（读/写）

• 好处：更加方便的操作data中的数据

• 基本原理：

  通过Object.defineProperty()把data对象中所有属性加到vm上

  为每一个添加到vm上的属性，指定一个getter/setter

  在getter/setter内部去操作（读/写）data中对应的属性

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

props、自定义事件（$emit、ref）、EventBus、发布订阅、本地存储、vuex、$parent与$children、（provide和inject暂不清楚怎么使用）

computed和watch的区别？

computed能做的事情，watch都能做，两个都能实现的时候优先使用computed

computed可以缓存，不能处理异步操作

watch可以处理异步操作

computed 多对一；watch 一对多

watch的属性：

​ deep: true, // 是否进行深度监听
​ immediate: true // 是否初始执行handler函数

谈一下key值的作用？说一下diff算法？

作为虚拟DOM的标识、让vue对比新旧节点时、更快更高效

diff算法：

1. 新旧虚拟dom如果找到相同key
   • 若dom内容没变、直接使用之前真实dom
   • 如果变了、生成新真实dom替换之前的
2. 如果没有相同key
   • 直接生成真实dom

​ 3. 最小力度是标签、同层节点对比…

key的选择：

如果不存在对数据的逆序操作（如果还有输入类节点、渲染也会出问题）、仅用于渲染列表展示可以选择index作为key、有数据唯一标识的时候、最好还是选择唯一标识

为什么用中括号操作数组，Vue不更新页面？

对象不更新：是因为Object.defineProperty没有对对象的新属性进行属性劫持，使用this.$set方法解决

数组不更新：是因为监测数组不像检测对象，没有getter和setter，应该使用push等方法来操作数组、这类方法已经被Vue所管理、不完全同于原生方法。(data中数组重写原型链，使用 push方法相当于使用了Vue自己的方法来更新视图)

Vue的生命周期？

4对生命周期、常用的是mounted和beforeDestory

``mounted发请求，初次渲染数据等；beforeDestory`用于清除定时器、清除消息发布等

• beforeCreate和created之间、初始化数据：数据监测，数据代理
• created和beforeMount之间、解析模板、生成虚拟DOM
• beforeMount和mounted之间、将内存中虚拟DOM转为真实DOM
• beforeUpdate和updated之间、生成新的虚拟DOM与旧的比较并完成model=>view的更新

Vue事件绑定原理说一下？

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

Vuex说一下？

• State：放数据的地方、初始化数据

• Getter：技术属性、相当于computed

• Mutation：同步、唯一更改store中数据的方法

• Action：异步提交Mutation

• Moudule：store模块化

• 使用方法：

  //第一种🧡
  import {mapState,mapAction} from 'store'
  ...
  methods:{
    ...mapAction([`xxx`])  
  },
  computed:{
      ...mapState([`xxx`])
  }
  //第二种
  this.$store.state.数据
  this.$store.commit(“mutation函数名，发送到mutation中的数据)
  this.$store.dispatch(‘action中的函数名’，发送到action中的数据)
  

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

方法一：将数据定义在data之外

data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
 }

方法二：Object.freeze()

data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }

方法三：v-pre指令

父子组件生命周期顺序？

关键点： 父beforeMount -> 子beforeCreate

说说nextTick的用处？场景？

为节省性能、Vue先执行完当前函数回调再更新页面。要想等视图更新后再执行函数中某句代码；

this.$nextTick等更新视图后使用$ref才能拿到最新的值

Vue的SSR？

SSR就是服务端渲染、使用的是nuxt.js、基于nodejs serve服务环境开发，所有html代码在服务端渲染

SSR首次加载更快，有更好的用户体验，有更好的seo优化，因为爬虫能看到整个页面的内容，如果是vue项目，由于数据还要经过解析，这就造成爬虫并不会等待你的数据加载完成，所以其实Vue项目的seo体验并不是很好

小知识点

可以通过this.$options.data().xxx来获取初始值

provide和inject是响应式的吗？

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