vue相关知识点

Vue 通过实例化 Vue 这个构造函数 实现 vue 框架的所有功能 vm 得到的实例化对象，{{ }} 最普遍的模板标记标签 双大括号语法 插值表达式

        核心功能 允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 声明式 直接在 html 书写 a 编程式 直接在 javascript 书写 location.href

1.什么是vue

Vue 是一套用于构建用户界面的渐进式框架。vue就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

2.MVC 和 MVVM 区别

1.mvc

M即model模型，数据层，负责数据的处理和获取的数据接口层。

　　V即View视图，视图层，是指用户看到的并且与之交互的界面。比如由html元素组成的网页界面，或者软件的客户端界面。

　　C即controller控制器，控制层，它是Model 和 View 之间的胶水或者说是中间人。

　　　　模型(model)- 视图(view)- 控制器(controller)

        Model 和 View 是完全隔离的，由 Controller 作为中间人来负责二者的交互

　　同时三者是完全独立分开的

　　这样可以保证 M 和 V 的可测试性和复用性以及维护性，但是一般由于 C 都是为特别的应用场景下的 M 和 V 做中间者，所以很难复用。

 好处：

　　　　耦合性低

　　　　重用性高

　　　　部署快，生命周期成本低。

　　　　可维护性高。

存在的问题

　　　　不适合小型，中等规模的应用程序。

　　　　视图与控制器间的过于紧密的连接并且降低了视图对模型数据的访问。

MVC一句话描述：Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。

2.mvvm

　　　　Model ---->  每个页面单独数据

　　　　View ---->  每个页面中的HTML结构

• 达到了数据的双向绑定，一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。 实现的方式时：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转换成后端的数据。实现的方式是：DOM事件监听。

MVVM与MVC最大的区别就是：实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再手动操作Dom元素来改变View的显示。 而是改变属性后该属性对应的View层显示会自动改变（对应Vue数据驱动的思想）

整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也察觉不到View，这种低耦合模式提高代码的可重用性。

3.Vue组件通讯有哪些方式？

组件之间传值通讯分为三种: 父传子、子传父、兄弟组件之间的通讯;

1、props 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。

2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。

3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。

4、$refs 获取组件实例。

5、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式。

4.vue 和 react区别

react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。

1.数据绑定不同

vue是实现双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层发生改变更新视图层；

React是单项数据流，react中属性是不允许更改的，状态是允许更改的。react中组件不允许通过this.state这种方式直接更改组件的状态。自身设置的状态，可以通过setState来进行更改。

2.diff算法不同

vue中:vue比对节点，当节点元素类型相同，但是className不同，认为是不同类型元素，删除重建，而react会认为是同类型节点，只是修改节点属性 ；

React中：vue的列表比对，采用从两端到中间的比对方式，而react则采用从左到右依次比对的方式。当一个集合，只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到第一个。总体上，vue的对比方式更高效。

3.指令不同

vue中提供很多内部指令供我们使用，比如列表渲染用到v-for指令来渲染

react中就没有v-for指令，所有循环的时候用到map（）来渲染视图

4.生命周期不同

vue中：

初始化阶段：beforeCreate created beforeMount mounted

运行中阶段： beforeUpdate updated

销毁阶段： beforeDestory destoryed

react中：常用的几个生命周期：

初始化阶段：componentWillMount：此方法在完成首次渲染之前被调用；

componentDidMount：该方法发生在render方法成功调用并且真实的dom已经被渲染之后

运行中阶段：shouldComponentUpdate：这个函数的作用：当属性或状态发生改变后控制组件是否要更新，提高性能,返回true就更新，否则不更新，默认返回true。

销毁阶段：componentWillUnmount：该方法会在组件被移出之前被调用。

       1.React严格上只针对MVC的view层,Vue则是MVVM模式

       2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.

           而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

       3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';

           Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件;

       4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

       5.state对象在react应用中不可变的,需要使用setState方法更新状态;

         在vue中,state对象不是必须的,数据由data属性在vue对象中管理；

5.Vue 的 核心是什么 ?

灵活的组件应用，高效的数据绑定

允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

vue的两个核心点分别是数据驱动和组件系统。

1.数据驱动，即是ViewModel，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作DOM，而是通过修改数据，保证了数据和视图的一致性。

2.组件系统，组件的出现就是为了解决页面布局等等一系列问题，而vue中的组件分为两种，全局组件和局部组件，它提供了强大的页面布局功能。

6.如何理解声明式和编程式 的区别

声明式  直接在 html  书写    a

编程式  直接在 javascript 书写  location.href

编程式实现：需要以具体代码表达在哪里做什么，如何实现；

声明式实现：只需要声明在哪里，做什么，而无需关心如何实现；

7.Vue 常用的指令有哪些 (10条)

( v-bind, v-if, v-show, v-on, v-for, v-model, v-text, v-html, v-once)

v-if：根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。

v-show：根据表达式之真假值，切换元素的display CSS 属性。

v-for：循环指令，基于一个数组或对象渲染一个列表，Vue 2.0 以上必须需配合key值使用。

v-bind：动态地绑定一个或多个特性，或一个组件prop到表达式。

v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。

v-model：实现表单输入和应用状态之间的双向绑定。

v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。

v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-html 文本和html标签

v-text 只接受文本

8.如何理解Vue里面的数据响应式

响应式系统  (只要检测到数据更新,就一定会去修改视图 )    组件系统

    1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中

    2. 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值 (响应式)

Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。

9.Vue 实例有哪些属性 方法 事件

一、实例属性

1、vm.$data：获取data里的数据，相当于用this获取

2、vm.$options：用来获取定义在data外的数据和方法的

3、vm.$el：类型（HTMLElement）挂载元素，Vue实例的DOM根元素；

二、方法

1、vm.$mount('#id')：手动挂载

2、vm.$destroy()：销毁实例

3、vm.$nextTick(cb)：将回调延迟到dom更新之后执行。一般在修改数据之后使用它，修改数据之后需要等待dom更新，dom更新完成之后就会调用cb回调函数

4、vm.$set(obj, key, val)：添加属性值

5、vm.$delete(obj, key)：删除属性值

6、vm.$watch(data, cb[, options])：监听数值变化

10.Vue 里面 ref 的理解

• ref和reactive一样,也是用来实现响应式数据的方法
• 由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦
• 所以Vue3提供了ref方法实现简单值得监听
• ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.

详细来说ref被用来给DOM元素或子组件注册引用信息；

引用信息会根据父组件的$refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例

注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

11.实例生命周期分为几个阶段 有哪几个生命周期钩子函数

实例创建   beforeCreate   created   1       实例初始化创建    

实例载入   beforeMount    mounted   1       初始化载入    

实例更新   beforeUpdate   updated   n       实例 里面  data  数据改变    

实例销毁   beforeDestroy  destroyed  1      实例被移除

beforeCreate() 创建前，这个时候data中的数据，还未定义，所以不能使用

created()创建后 最早开始使用 data和methods中数据的钩子函数

​

beforeMount()挂载前 指令已经解析完毕内存中已经生成dom树，但是尚未挂载到页面中去，此时页面还是旧的。

mounted()挂载后 dom已经渲染完毕，此时页面和内存中都是最新的数据，最早可以操作DOM元素钩子函数

​

beforeUpdate()更新前 当视图层的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新，数据没有与页面同步

updated()更新后 数据更新完成以后触发的方法，DOM节点已经更新

​

beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作

destroyed()销毁完毕 组件已经全部销毁，Vue实例已经被销毁，Vue中的任何数据都不可用

其他三个：

activated 被 keep-alive 缓存的组件激活时调用。

deactivated 被 keep-alive 缓存的组件停用时调用。

errorCaptured 2.5.0+ 新增当捕获一个来自子孙组件的错误时被调用

12.生命周期钩子函数存在的意义

每个 Vue 实例在被创建时都要经过一系列的过程

    (实例创建  实例载入  实例更新  实例销毁 )

    这些过程称为 实例生命周期   Vue 会在这个每个周期设置对应的函数去监听  这些函数就叫  生命周期钩子函数

Vue内置生命周期钩子函数，给了开发者在不同阶段添加自己代码的机会

13.Vue 对虚拟DOM 的理解

Vue  创建实例之前 DOM树 先读取根元素 解析 所有的dom数据标签  然后以  树形结构 把dom数据存储在内存 (模板存储DOM)

在内存中 描述 dom节点 的 数据信息  叫做 虚拟DOM

虚拟 DOM，其实就是用对象的方式取代真实的 DOM 操作，把真实的 DOM 操作放在内存当中，在内存中的对象里做模拟操作。当页面打开时浏览器会解析 HTML 元素，构建一颗 DOM 树，将状态全部保存起来，在内存当中模拟我们真实的 DOM 操作，操作完后又会生成一颗 dom 树，两颗 DOM 树进行比较，根据 diff 算法比较两颗 DOM 树不同的地方，只渲染一次不同的地方。

创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。

14.Vue 对Diff 算法的理解

diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法，会找到不同地方，只去渲染不同的地方，总的来说就是减少DOM，重绘和回流。

15.计算属性 computed 和 watch 的区别

计算属性    对于任何复杂逻辑，你都应当使用计算属性  

        computed    是一个变量  类似data  this.xxxx

        依赖  其他某个数值   watcher

        缓存  只有修改计算属性依赖的值 才会重新计算求值  (计算属性是基于它们的响应式依赖进行缓存的)

拆分写法  

        getter  默认有一个  getter 取值,设置值时触发。

        setter  监听计算属性的值主动改变,获取值时触发

侦听属性  watch   (修改数据 触发监听 从而请求ajax)

        监听某些数据需要随着其他的数据的变化而变化  

        监听变量变化 然后获取ajax

16.计算属性 computed 里面 get 和 set 的区别

1.计算属性有一个get和set平常我们只用他的get是-一个简写

2.get的意思是通过别的数据得到这个计算属性的值

3.set的意思是如果这个计算属性的值发生变化就会触发set方法参数（newValue就是sum改变后的值）

4.set什么时候会用到呢?计算属性用在表单元素中的时候会用到这个set

Get是基于其他的数据来获取到computed里定义的那个数据

Set是根据computed里定义的那个数据来改变其他的数据

setter 方法在设置值是触发。

getter 方法在获取值时触发

17.watch 如何实现深度监听

深度监听使用方法：

重点：handler方法，deep属性，immediate属性

watch: {

    obj : {

        handler:function() {   //特别注意，不能用箭头函数，箭头函数，this指向全局，处理函数

        },

        deep: true    //深度监听

    }

}

handler方法，之前我们写的 watch 方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

优化：直接监听到对象中的属性

watch: {

  'obj.a': {

    handler(newName, oldName) {

      console.log('obj.a changed');

    },

    immediate: true,

    // deep: true

  }

}

immediate:true代表如果在 wacth 里声明了需要做监听的数据之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

18.v-if 和 v-show 的区别

v-if 是“真正”的条件渲染  v-if 也是惰性的   如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块

        v-show  不管条件为真为假 都会去渲染DOM  简单地基于 CSS 进行切换

使用场景 (使用频率)

v-if 有更高的切换开销 在切换条件很少改变的情况下 推荐使用 v-if v-if 现实初始化内部的数据变量

v-show 有更高的初始渲染开销 需要频繁的切换的情况下 推荐使用 v-show

19.v-for循环为什么需要给每一项绑定不同的Key

key  为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性，Vue 识别节点的一个通用机制   一个组件添加 key key值更改 组件强制刷新

20.v-model的原理(底层原理) Object.defineProperty

vue 的双向绑定是由数据劫持结合发布者－订阅者模式实现的就是通过 Object.defineProperty()来劫持对象属性的 setter 和 getter操作，在数据变动时做你想要做的事情。

1、 observer 主要是负责对Vue数据进行递归便利，使其数据拥有get和set方法，当有数据给某个对象值赋值，就触发 setter 就监听到数据的变化了。（ 如有变动可拿到最新值并通知订阅者 ）

2、compile 指令解析器负责绑定数据和指令解析。 将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数。一旦数据有变动，收到通知，更新视图

3、 订阅者 watcher ： Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是 负责数据监听，当数据发生改变，能调用自身的update()方法，并触发Compile中绑定的更新函数

4、实现一个订阅器 dep： 采用发布者订阅者模式，用来收集订阅者的 watcher，对监听器 observer 和订阅者 watcher 进行统一管理

21.keep-alive 的作用

keep-alive是Vue提供给我们一个内置组件，会缓存不活动的组件实例，而不是销毁它们， 作为标签使用 包裹在需要缓存的组件外

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以使用keep-alive保存列表页面的滚动位置。

组件使用keep-alive以后会新增两个生命周期 actived() deactived()

activated（组件激活时使用） 与 deactivated（组价离开时调用）

22.路由的作用是什么

 路由的作用：

    1. 实现构建单页面应用，index.html其他页面，组件形式加载。single-page-application(SPA)

    2. 将组件(components)映射到路由(router)，然后告诉Vue Router在哪里渲染它们。