vue知识点总结

Hello，大家周末好。新年将至公司最近比较忙今天抽空一起复习一下vue的常用知识点吧！

学习一个新框架都应该先知道框架的生命周期在哪一个阶段干什么事情。
1：生命周期

     beforeCreate(创建前)
     created(创建后)
     beforeMounte(挂载前)
     mounted(挂载后)
     beforeUpdate(更新前)
     updated(更新后)
     beforeDestroy(销毁前)
     destroyd(销毁后)

2：vue的虚拟DOM

Vue.js通过编译将模版转换成渲染函数(render)，执行渲染函数就可以得到一个虚拟DOM
简单点讲，在Vue的实现上，Vue讲模版编译成虚拟DOM渲染函数。结合Vue自带的响应系统，在状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

3：组件通信

props/$emit
$parent/$children
provide/inject
$ref
$bus
$attrs/$listeners
vuex

4：双向绑定

官方解释：v-model其实是一个语法糖，那么语法糖可以理解为是一个封装的函数来处理
         数据的双向绑定的
各路大神解释：实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，
	 	     通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发
		     布消息给订阅者，触发相应的监听回调。

5：mvc和mvvm

 mvc：可以看html看成view层，js看成controller层，ajax看成Model层，处理用
      户与应用的交互，响应对view的操作（对事件的监听），调用Model对数据
      进行操作，完成model与view的同步（根据model的改变，通过选择器对view进行操作）
      mvc是单向的
mvvm：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用
      再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View
      层显示会自动改变，MVVM是双向的。

6：$nextTick

在created函数中如果如需操作DOM那么需要用this.$nextTick函数包裹起来，要不然
找不到DOM元素。
原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染

7：$set
在开发过程中可能大家会遇到数据发生变化了但是视图层不会发生变化
其实vue官方给出了解决方法

 使用方法：  this.tableData.forEach(element => {
			    this.$set(element, 'edit', false)
			  })
	意思就是给每一个对象添加一个属性key为edit，value为false

8：vue组件的data为什么全是函数而不是对象

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，
类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各
自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，
就会造成一个变了全都会变的结果。

9：key的作用

作用:给每一个节点添加一个标识，当数据发生改变的时候diff算法可以快速的找到需要
更新或者改变的视图

10：常用修饰符

sync:可以简单的实现父/子组件之间的通信(只可以改变值)
stop:阻止事件冒泡
prevent:阻止默认事件
once:只触发一次事件

11：router和route

$router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得
到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了
许多关键的对象和属性。

12：内置组件

component(内置组件)：可以用来写组件的tab切换
keep-alive：缓存组件
可以简单理解为从页面1跳转到页面2后，然后后退到页面1，只会加载缓存中之前已经
渲染好的页面1，而不会再次重新加载页面1，及不会再触发页面一种的created等类似
的钩子函数，除非自己重新刷新该页面1。