史上最强Vue，面试、项目全靠它

vue框架篇

vue的优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；

简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

双向数据绑定：保留了angular的特点，在数据操作方面更为简单；

组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；

视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；

运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

数据驱动的理解

当vue中的数据发生改变的时候，用户的界面也会相应的变化，开发者不需要手动去修改DOM元素。这样可以认为是vue.js帮我们处理了数据和DOM对象之间的映射，我们有更多的精力去处理业务逻辑。这样比频繁的操作DOM元素，效率要高很多。

MVVM的理解

vue中的数据驱动是通过MVVM框架实现的，M指的是data数据部分，V指的是view页面视图部分，VM指的是连接数据和页面视图的中间件。

• MVVM说明
  数据和页面视图是不能直接通信的，这时候需要中间件来实现双方的数据通信。
  当数据发生变化的时候，中间件监听到了以后通知页面视图进行渲染，如果是有事件触发的时候，中间件监听到了以后，会对data中的数据做出更改
  MVVM最终实现了业务(data)和视图的分离
• MVVM三要素
  1.响应式 vue如何监听数据的变化
  2.vue模板如何编写和解析，如何把具体的数据替换到模板中，{ {}}双花括号的形式。
  3.vue如何把模板转换为HTML(虚拟DOM的显示和DOM的转换)

组件化的理解

1.组件定义

组件是可复用的的vue实例，可以增强代码的复用性，提高可维护性

2.组件的使用场景

1.通用组件 实现基本的功能，比如输入框组件，下拉菜单组件等等(element-ui中的组件)
2.业务组件 用于完成一定的业务和功能，比如搜索框组件、轮播图组件、tab选项卡组件等。
3.页面组件 组织应用各部分页面内容，用于页面组件的切换，比如商品列表页面组件，购物车页面等。

3.如何使用组件

第一种：components注册
第二种：有状态组件(data) 无状态组件(函数组件)
第三种：组件传值、父传子用props接收，子传父用emit
第四种：组件用于内容的分发，比如插槽的使用

4.vue组件产生的过程

组件配置-Vuecomponent-render-虚拟dom-真实的DOM结构

数据闪烁

如果是{ {msg}}会出现数据闪烁的现象，用v-text="msg"可以解决这个问题

<div id="app">
      <div>{
   {
    msg }}</div>
      <div v-text="msg"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
   
        el: "#app",
        data() {
   
          return {
   
            msg: "aa"
          };
        }
      });
    </script>

请详细说下你对vue生命周期的理解？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el为undefined，还未初始化。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

vue中父子组件的生命周期

渲染的过程
-父beforCreate>父created>父beforMount>子beforCreate>子create>子beforMount>子Mounted>父mounted

子更新创建过程
-父beforUpdate>子beforUpdate>子updated>父updated

父组件更新过程
-父beforUpdate>父updated

销毁过程
-父beforDestory>子beforDestory>子destoryed>父destoryed

vue中的指令和它的用法

v-for 用于遍历数组、对象、数字的值，使用的语法是 name in 数组（对象，数字）

如果遍历的是数组，则可以获取到数组的元素和下标（索引），使用方法为 （item,index) in 数组

如果遍历的是对象，则可以获取到对象的属性名和属性值，使用方法为（属性，值）in 对象

注意：使用v-for指令时，最好给一个key属性，用于优化vue对DOM的渲染

v-model 双向数据绑定指令 一般用于表单元素

v-on 用于添加事件 用@符代替

v-bind 用于绑定一个或多个属性 用：代替

v-html 数据被定义在数据属性中，指明了具体的html内容。对应JavaScript中的innerHTML

属性

v-text 数据被定义在数据属性中，指明了具体的值。将具体的值展示在视图层，对应JavaScript中的innerText属性

v-once 作用是只会渲染对应元素一次，数据更行不会引起视图的更新，目的是为了优化页面的性能

v-if 用于根据条件表法是来带有条件的渲染。如果条件为假，那么页面中将不回渲染当前元素

v-else 在v-if条件不满足时才起作用，不能单独使用，必须配合v-if一起使用

v-show 用于显示或者隐藏元素，它是以style样式的方式来实现的

为什么vue组件中data必须是一个函数？

对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。

vue中v-if和v-show有什么区别？

v-if和v-show看起来似乎差不多，当条件不成立时，其所对应的标签元素都不可见，但是这两个选项是有区别的:

1、v-if在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销相对来说会比v-show大。

2、v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS切换。

computed和watch的区别

计算属性computed：

• 支持缓存，只有依赖数据发生改变，才会重新进行计算
• 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
• computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
• 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

• 不支持缓存，数据变，直接会触发相应的操作；
• watch支持异步；
• 监听的函数接收两个参数，第一个