VUE学习要点整理

目录

一、理解VUE原理

1、Vue.js 框架的优势：

2、VUE安装：

3、VDOM原理

4、响应式原理 

二、从MV*模式理解响应式原理

1、MVC模式：

2、MVP模式

3、MVVM模式

三、VUE语法：指令、事件、过滤器、计算属性，侦听器

1、指令：

2、事件：

3、过滤器

4、计算属性：

5、侦听器：

四、组件

1、组件生命周期：

2、组件通信

1、父子通信

2、子组件向父组件传递数据

3、父组件访问子组件的数据：this.$ref

4、子组件访问父组件的数据: this.$parent

5、兄弟组件之间通信

五、路由

六、vuex

七、脚手架:  Vue cli

---

一、理解VUE原理

用于构建用户界面的渐进式框架。通过Vue指令，实现JS和HTML的分离，JS代码仅仅是通过Module去控制View，而不是定义View。

中文官网：https://cn.vuejs.org/

 

1、Vue.js 框架的优势：

• 提高代码复用率
• 降低模块之间耦合度
• 提高开发速度
• 提高代码质量
• 组件化(web component)开发

2、VUE安装：

1、安装node.js 

https://nodejs.org/en/     git:􏰁  https://git-scm.com/download/win/

2、安装bower

npm install bower -g (用 bower -v  查看是否安装成功)

3、bower install vue<#版本> (用bower info vue 查看版本)

 

3、VDOM原理

1、解决的问题：Virtual DOM 用来解决DOM与Layout绘画压力问题。每一次DOM改变，Layout都会repaint，如果操作频繁，会造成渲染压力。

vue=>JSEngine=>DOM=>Layout

2、择时渲染：VDOM 会择时渲染，1、setTimeout计时，或者引擎觉得合理的时机。

3、Diff算法：VDOM在引擎源码中，是一个JS对象，其实是树状结构的JSON。所有节点都挂载在根节点上。每次diff的时候，有key就按照key比较，key必须是唯一的，可以用id+data作为key。没有key，就按照type比较。type不同的节点，直接拿掉，记录下来，下次重画。子节点里，比较出新增的，删除的，把这些都记录成diff，下次用diff重画节点。

 

面试题1:

用JS代码操作DOM写一个响应刷新

function changeDirectly(){
    var app = document.getElementById('app');
	var html = '';

	var htmlTmp = document.getElementById('tmp').innerHTML;

	html = htmlTmp.replace(/%word%/g, 'abc');
	console.log(html);

	app.innerHTML = html;
}

addEventListener('click', changeDirectly);

实质就是在DOM中直接查找指定的标签，然后全局替换。

 

4、响应式原理 

https://cn.vuejs.org/v2/guide/reactivity.html 官网文章说的很透彻了。

1、JavaScript ES5 中 有个一个方法，Object.defineProperty，可以把传入vue的JS对象中的所有property转为getter/setter。(VUE不支持IE8以下是因为其不支持ES5)

2、每个vue组件实例都对应一个watcher实例，watcher把组件渲染过程中接触过的JS数据的property记录为依赖，当依赖的setter触发时，watcher被通知，然后重新渲染关联组件。

图片引自https://cn.vuejs.org/images/data.png

 

3、涉及vue中data对象的property属性修改，如果要实现修改后property的响应，必须要从原型链的层级修改。具体方法，参考文章中详细介绍。

4、另外在异步更新DOM过程中，如果同一个事件循环过程中，同一个watcher被触发多次，那么只会被推入到队列中一次，在下一次tick中，只执行最后更新的那次，这种去重简化了不必要的DOM刷新。

5、每次tick，实际原理和setTimeOut类似，都会在下一轮刷新时执行。