关于Vue你不知道的那点事儿，Vue知识总结大全，让你彻底搞懂Vue

Vue 的最大的优势是什么呢?

Vue 作为一款轻量级框架、简单易学、数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快，并且作者是中国人尤雨溪，对应的API文档对国内开发者优化，作为前端开发人员的首选入门框架，Vue 有很多优势：

• Vue.js 可以进行组件化开发，使代码编写量大大减少，读者更加易于理解

• Vue.js 最突出的优势在于可以对数据进行双向绑定

• 相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面

• Vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和 dom,这样大大加快了访问速度和提升用户体验

• 而且他的第三方 UI 组件库使用起来节省很多开发事件,从而可以提升开发效率

Vue 和 jQuery 两者之间的区别是什么？

• jQuery 介绍：曾经也是现在依然最流行的 web 前端 js 库，可是现在无论是国内还是国内的使用率正在渐渐被其他的 js 库所代替，随着浏览器厂商对HTML5 规范统一遵循以及 ECMA6 在浏览器端的实现，jQuery 的使用率将会越来越低

• Vue 介绍：Vue 是一个兴起的前端 js 库，是一个精简的 MVVM。从技术角度讲，Vue.js 专于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的 mvmm 框架如 Angular，React 都是大同小异，本质上都是基于 MVVM 的理念。 然而 Vue 以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起

• Vue 和 jQuery 对比 jQuery 是使用选择器（）选取 DOM 对象，对其进行赋值、取值、事绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的。比如需要获取 label 标签的内容：）选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的。比如需要获取 label 标签的内容：(“lable”).val();,它还是依赖 DOM 元素的值。Vue 则过 Vue 对象将数据和 View 完全分离开来了。对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个vm 实现相互的绑定。这就是传说中的 MVVM。

mvvm 和 mvc 区别是什么？哪些场景适合？

• MVVM 基本定义
  MVVM 即 Model-View-ViewModel 的简写.即模型-视图-视图模型.模型(Model)指的是后端传递的数据.视图(View)指的是所看到的的页面.视图模型(ViewModel)是mvvm模式的核心,它是连接 view 和 model 的桥梁.它有两个方向:一是将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的的页面.实现的方式是:数据绑定.二是将视图(View)转化成模型(Model),即将所看到的的页面转化成后端的数据.实现的方式是:DOM 事件监听.这两个方向都实现的,我们称之为数据的双向绑定
• MVC 基本定义
  MVC 是 Model-View-Controller 的缩写.即模型-视图-控制器.M 和 V 指的意思和 MVVM 中的 M 和 V 意思一样.C 即 Controller 指的是页面业务逻辑.使用 MVC 的目的就是将 M 和 V 的代码分离.MVC 是单向通信.也就是View 跟 Model,必须通过 Controller 来承上启下.MVC 和 MVVM 的区别并不是 VM 完全取代了 C,只是在 MVC 的基础上增加了一层 VM,只不过是弱化了 C 的概念,ViewModel 存在目的在于抽离 Controller 中展示的业务逻辑,而不是替代 Controller,其它视图操作业务等还是应该放在 Controller 中实现.也就是说 MVVM 实现的是业务逻辑组件的重用,使开发更高效,结构更清晰,增加代码的复用性
• 使用场景
  MVC 和 MVVM 其实区别并不大。都是一种设计思想。主要就是 MVC 中Controller 演变成 MVVM 中的 viewModel，MVVM 主要解决了 MVC 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。区别：Vue 数据驱动，通过数据来显示视图层而不是节点操作。 场景：数据操作比较多的场景，需要大量操作 DOM 元素时，采用 MVVM 的开发方式，会更加便捷，让开发者更多的精力放在数据的变化上，解放繁琐的操作 DOM 元素。

Vue 数据双向绑定的原理

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调

第一步:

需要 observe 的数据对象进行递归便利,包括子属性对象的属性,都加上,setter 和 getter 这样的话,给这个对象的某个值赋值,就会触发 setter, name就能监听到了数据变化

第二步:

compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

第三步:

Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁,主要做的事情是:

在自身实例化时往属性订阅器(dep)里面添加自己
自身必须有一个 update()方法
待属性变动 dep.notice() 通知时,能调用自身的 update() 方法,并触发 Compile 中绑定的回调,则功成身退

第四步:

MVVM 作为数据绑定的入口,集合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据 model 变更的双向绑定效果

Object.defineProperty 和 Proxy 的区别

(1) Proxy 的优势如下:

• Proxy 可以直接监听对象而非属性
• Proxy 可以直接监听数组的变化
• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的
• Proxy 返回的是一个新对象，我们可以只操作新的对象达到目的，而Object.defineProperty 只能遍历对象属性直接修改
• Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利

（2）Object.defineProperty 的优势如下
兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题，而且无法用 polyfill 磨平

Vue 生命周期的各个阶段

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom → 渲染、更新 → 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期

beforeCreate

在实例初始化之后，数据观测 （data observer）和 event/watcher 事件配置之前被调用

created

在实例创建完成后被立即调用.在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调.然而,挂载阶段还没开始,$el 属性目前不可见

beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用

mounted

el 被创建的 vm.el 替换,并挂载到实例上去之后调用该钩子.如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内.

beforeUpdate

数据更新时调用,发生在虚拟 DOM 打补丁之前.这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器.该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子

activated

keep-alive 组件激活时调用.该钩子在服务器端渲染期间不被调用

deactivated

keep-alive 组件停用时调用.该钩子在服务器端渲染期间不被调用

deforeDestroy

实例销毁之前调用.在这一步,实例仍然完全可用.该钩子在服务器端渲染期间不被调用

destroyed

Vue 实例销毁后调用.调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁.该钩子在服务器端渲染期间不被调用

errorCaptured(2.5.0+ 新增)

当捕获一个来自子孙组件的错误时被调用.此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false 以阻止该错误继续向上传播

Vue 组件封装过程

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题

分析需求

确定业务需求，把页面中可以服用的结构，样式以及功能，单独抽离成一个文件，实现复用

具体步骤

• 使用 Vue.component 方法注册组件，子组件需要数据，可以在 props 中接受定义，而子组件修改好数据后，想把数据传递给父组件。可以采用$emit 方法向外抛数据
• 如果需要给组件传入模板，则定义为插槽 slot
• 如果需要 父组件主动调用子组件的方法 可以在 methods 选项中开放方法

Vue 组件传值的过程

父组件向子组件传递数据

父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可

子组件向父组件传递数据

子组件通过 Vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理

非父子组件之间传递数据

• 1.引入第三方 new Vue 定义为 eventBus
• 2.在组件中 created 中订阅方法 eventBus.$on(“自定义事件名”,methods中的方法名)
• 3.在另一个兄弟组件中的 methods 中写函数，在函数中发布 eventBus 订阅的方法 eventBus.$emit("自定义事件名”)
• 4.在组件的 template 中绑定事件(比如 click)

组件中 name 选项的作用

• 1.项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
• 2.DOM 做递归组件时需要调用自身 name
• 3.Vue-devtools 调试工具里显示的组见名称是由 Vue 中组件 name 决定的

Vue组件data必须是函数的原因

每个组件都是 Vue 的实例
组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他
组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果

Vue的组件命名规范

给组件命名有两种方式，一种是使用链式命名 my-component，一种是使用大驼峰命名 MyComponent 在字符串模板中

<my-component></my-component>

<MyComponent></MyComponent>
//都可以使用，
//在非字符串模板中最好使用<MyComponent></MyComponent>
//因为要遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突

在组件中监听路由参数变化的方式

有两种方法可以监听路由参数的变化，但是只能用在包含<router-view />的组件内

第一种

watch: {
  '$route'(to, from) {
  	// 在此处监听

  }
}

第二种

beforeRouteUpdate (to, from, next) {
	//这里监听

}