Vue知识点总结

简介一下vue，首先是一套用于构建用户界面的渐进式框架，目前流行框架之一；

说到Vue，很多人都会说起MVVM是什么？
mvvm简称为：model-view-viewModel.
可以说是MVC的改进版，就是将view的状态和行为抽象化，将视图和业务逻辑分开来处理。

生命周期（8个阶段）
beforeCreate（创建前）
//初始化注入
create（创建后）//实例完成，demo节点创建完毕，执行钩子
//有没有el选项，没有则使用vm.$mount()去挂载模板
//把data对象里的数据和vue语法声明的模板编译成浏览器可读的HTML
beforeMount（载入前） //将编译完成的HTML挂载到对应虚拟dome时触发钩子
mounted（载入后）//编译好的HTML挂载页面完成执行的钩子
beforeUpdate（更新前）//实时监听数据变化，并随之更新dome
updated（更新后）//更新之后执行钩子
beforeDestroy（销毁前）//拆除数据监听，子组件和事件监听
destroyed（销毁后）//实例销毁完成执行的钩子

常用的传值方法

• 父子传值
• 子父传值
• 相邻组件传值
• 路由传值
• vuex传值
• 储存传值

vue视图更新的原理及更新方法
更新原理：vue是数据去驱动视图的变化，主要是vue使用了Object.definedProperty()方法；
其中Object.definedProperty(obj,prop,desc)有三个参数，第一个为对象，第二个为属性，第三个为属性的描述对象。
一般情况下我们给对象定义属性是直接进行赋值操作，那么定义的属性可以修改也可以删除，如果我们相对其进行更加精准操作就需要使用这个方法；
当你把一个普通的javascript对象传入vue实例作为data选项，vue将遍历此对象所有的property，并使用Object.defineproperty方法把这些property全部转化成getter/setter。
然后这些getter/setter对用户来说是不可见的，但是在内部它们让vue能够追踪依赖，在property被访问和修改时通知变更。
需要注意的是不同浏览器在控制台打印数据对象时对getter/setter的格式化并不同，所以建议安装vue-devtools来获取对检查数据更加友好的用户界面。
Object.defineproperty是es5中一个无法shim的特性，这就是不支持ie8的以及更低版本的原因。
每个组件实例对应一个watcher实例，它会在组件渲染的过程中把'接触'过的数据property记录为依赖。
之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染。

视图更新的方法：
直接赋值

Object.keys(res).forEach(item => {
  this.dataVal[index][item] = res[item];
})

间接赋值：深拷贝赋值
JSON.parse(JSON.stringify(this.dataVal))
$set赋值

Object.keys(res).forEach(item => {
  this.$set(this.dataVal[index],item,res[item])
})

重新渲染

this.$forceUpdate() //迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
或者使用v-if&this.$nextTick()

双向数据绑定原理：
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter/getter,在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

具体步骤：
1.需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上setter/getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到数据的变化。
2.compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据 有变动，收到通知，更新视图。
3.watcher订阅者是observer和compile之间通讯的桥梁，主要做的事情是：
在自身实例化时往属性订阅器里面添加自己
自身必须有一个update()方法
待属性变动dep.notice()通知时，能调用自身的update()方法，并触发compile中绑定的回调。
4.MVVM作为数据绑定的入口，整合observer，compile和watcher三者，通过observer来监听来监听自己的model数据变化，通过compile来解析编译模板指令，最终利用watcher搭起observer和compile之前的通讯桥梁，
达到数据变化--视图更新；视图交互变化--数据model变更的双向绑定效果。

localStorage和sessionStorage的区别
共同特点：都是保存在客户端，存储大小为5M
localStorage: 长期保存，直到删除
sessionStorage：临时保存，关闭窗口则删除

vue性能优化
1.v-for遍历添加key属性，避免v-if的同时使用
2.vue的data是函数而不是对象
3.监听事件不用时及时销毁
4.组件懒加载，路由懒加载，图片懒加载 可以安装：npm install@xunlei/vue-lazy-component
5.keep-alive缓存页面
6.v-if和v-show的使用
7.SSR
8.引入按需加载
9.防抖和节流
等等...