目录
一、理解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:
用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类似,都会在下一轮刷新时执行。