vue-钩子/ 虚拟DOM / 模板语法

来源:互联网 发布:淘宝客服心得体会 编辑:程序博客网 时间:2024/05/19 13:55

钩子
原名是“hook”,它是一种事件劫持机制,也就是说它会比你的事件更早进行执行处理。
路由导航钩子 : vue-router
beforeRouteEnter 钩子 不能 访问 this,因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
生命周期钩子
挂载 mount 将设备作为系统的一个文件进行操作。就是通过这种方式,将原本电脑不认识的设备识别为电脑认识的文件或者认识的设备。以便对设备进行操作。


虚拟DOM
在如今的应用程序的DOM中大概有成千上万的节点,因此更新所花费的时间就更长了。有很多不可避免的很小很频繁的更新拖慢了页面的速度。
DOM 节点也可以表示 JavaScript 中的对象, 也就是虚拟DOM

// Pseudo-code of a DOM node represented as JavascriptLet domNode = {  tag: 'ul'  attributes: { id: 'myId' }  children: [    // where the LI's would go  ]};

虚拟DOM利弊分析

大小 - 其中之一就是更多的功能意味着代码包中更多行的代码。幸运的是,Vue.js 2.0 依旧比较小(当前版本 21.4kb),并且也正在删除很多东西。内存 -同样,虚拟DOM需要将现有的DOM拷贝后保存在内存中,这是一个在DOM更新速度和内存使用中的权衡。并不适用所有情况 -如果虚拟DOM可以一次性进行批量的修改是非常好的。但是如果是单独的、稀少的更新呢?这样的任何DOM更新都将会使虚拟DOM带来无意义的预计算。优: 但是对于多数的单页面应用来说,它还是会带来提升的。为什么做这个?它为你的JavaScript带来了全编程能力。你可以通过使用JavaScript的数组方法来创建工厂化函数来搭建你的虚拟节点等等,这些用模板语法处理起来可能会更复杂。

模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

原创粉丝点击