经过近一阶段的学习,我对前端知识有了更深的了解,知识框架进一步丰富。在千锋郑州Web前端第三阶段,我们主要学习了node.js和Vue框架。node.js是是使用express脚手架快速搭建一个项目,Vue是使用Vue-cli也能快速的搭建一个项目。其中学习时间最长的是Vue,Vue具有易用、灵活、高效等特点,是之后工作中使用最多的一种框架。下面是我学习Vue做的笔记:
Vue-响应式原理:
返回:
replace:表示替换当前路由,不会在历史记录中插入内容;
通过object.defineproperty可以作为一个对象定义一个属性;
在设置属性的时候可以定义一个get,get回调方法对其进行值的设置和读取的时候会触发此方法;
可以在set和get的回调函数中设置一下双向绑定的效果。
看响应式原理:
当你把一个普通的JavaScript对象传入Vue实力作为data选项,Vue将遍历此对象所有的属性,并使用object.defineproperty把这些属性全部转为getter/setter。
虚拟DOM:
在JS对象和真实DOM树之间存在的一个许你对象,所有的DOM树节点都是根据这个虚拟DOM实现生成的。
在虚拟DOM向真实的DOM树转换之前会根据diff算法动态的计算需要更改的标签,进行替换操作。
虚拟DOM优势: 可以针对不同的终端平台输出不同的页面展示节点,比如: 网页、微信小程序、原生应用。
在生成的时候只需要修改render方法渲染出不同的节点标签即可,浏览器生成DOM树的时候非常消耗资源,因此引入虚拟DOM概念。
通过一定的算法优化之后能够非常快捷的根据数据生成真实的HTML节点,
现在Vue和react都是使用的虚拟DOM,虚拟DOM就是通过一个对象描述一个HTML结构:
通过JS 写一个循环把节点生成在页面上;
需要修改某一个节点的值,可以直接修改对象上的属性;
然后调用render方法重新渲染页面;
渲染的时候会对虚拟DOM中的几点作比对,只重新渲染。
Vuex
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所组件的状态,并以相应的规则保证状态以一种不可预测的范式发生变化。
状态管理应用包含以下几部分:
State:驱动应用的数据源;
View:以声明的方式将state映射到视图;
Actions:相应在view上的用户输入导致的状态变化;
多个组件共享状态;
多个视图依赖于同一状态;
来自不同视图的行为需要变更同一状态。
state
单一状态树
Vuex是使用单一状态树的,用一个对象就包含了全部的应用层及状态。作为唯一数据源,每个应用仅仅包含一个store实例。单一状态树让我们能够直接的定位以特定的状态片段,在调试过程中也能轻易地去的整个当前应用转改的快照。
axios
特点:支持浏览器和node.js,支持promise,能拦截请求和响应,能转换请求和相应数据,能取消请求,自动装换JSON数据,浏览器端支持防止CSRF(跨站请求伪造)。
“书到用时方恨少,事非经过不知难”。在千锋郑州Web前端学习的这段时间,我越发感觉自己知道的是那么少,对未来的求职有了信心的同时,也感觉到了些许压力。在接下来日子里,我会做到“拼搏到无能为力,坚持到感动自己”!
相关文章
了解千锋动态
关注千锋教育服务号
扫一扫快速进入
千锋移动端页面
扫码匿名提建议
直达CEO信箱