We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
感谢cobish友情赞助ppt
为什么虚拟dom?我们知道dom操作是非常昂贵的,大量的dom耗时也非常可观,而虚拟dom的产生就是来解决这个问题的。
snabbdom 是一套实现虚拟dom的开源库,vue 就是借鉴了snabbdom来实现虚拟dom的。snabbdom主要有2个方法。h, patch `function render(data) { var newVnode = h('table',{}, data.map(function(item) { var tds = []; var i ; for(i in item) { if (item.hasOwnProperty(i)){ tds.push(h('td', {}, item[i] + '')); } } return h('tr', {}, tds); })); if (vnode) { patch(vnode, newVnode); } else { patch(container, newVnode); } vnode = newVnode;
}`
由上面的方法我们可以看出,h 方法主要是创建了虚拟dom, patch方法主要是将创建的虚拟dom进行绑定或者替换。 `function render(data) { var $container = $('#container'); $container.html('');
var $table = $('<table>'); $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>')) data.forEach(function(item) { $table.append($('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.address+'</td></tr>')) }); $container.append($table); }`
我们用jq 和 snabbdom两种render 查看页面渲染对比,可以清楚看到,使用snabbdom的render方法时,实现了最小改动,变化的数据的改动,而不是整片改动。 可见虚拟dom效果更高。
Flow 是 facebook 出品的 JavaScript 静态类型检查工具。 Vue.js 的源码利用了 Flow 做了静态类型检查,所以了 解 Flow 有助于我们阅读源码。
vue 使用了rollup来打包,这样打包出来的js更加简练,相对于webpack来说,没有工具添加的代码。
|— build 打包相关的配置文件,其中最重要的是config.js。主要是根据不同的入口,打包为不同的文件。
|— dist 打包之后文件所在位置 |— examples demo示例 |— flow 因为Vue使用了Flow来进行静态类型检查,这里定义了声明了一些静态类型 |— packages vue还可以分别生成其它的npm包 |— src 主要源码所在位置 |— compiler 模板解析的相关文件 |—codegen 根据ast生成render函数 |—directives 通用生成render函数之前需要处理的指令 |—parser 模板解析 |— core 核心代码 |— components 全局的组件,这里只有keep-alive |— global-api 全局方法,也就是添加在Vue对象上的方法,比如Vue.use,Vue.extend,,Vue.mixin等 |— instance 实例相关内容,包括实例方法,生命周期,事件等 |— observer 双向数据绑定相关文件 |— util 工具方法 |— vdom 虚拟dom相关 |— entries 入口文件,也就是build文件夹下config.js中配置的入口文件。看源码可以从这里看起 |— platforms 平台相关的内容 |— web web端独有文件 |— compiler 编译阶段需要处理的指令和模块 |— runtime 运行阶段需要处理的组件、指令和模块 |— server 服务端渲染相关 |— util 工具库 |— weex weex端独有文件 |— server 服务端渲染相关 |— sfc 暂时未知 |— shared 共享的工具方法 |— test 测试用例
在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数,用来实现「响应式」以及「依赖收集」
parse 会用正则等方式解析 template 模板中的指令、class、style等数据,形成AST。
optimize 的主要作用是标记 static 静态节点,这是 Vue 在编译过程中的一处优化,后面当 update 更新界面时,会有一个 patch 的过程, diff 算法会直接跳过静态节点,从而减少了比较的过程,优化了 patch 的性能。
generate 是将 AST 转化成 render function 字符串的过程,得到结果是 render 的字符串以及 staticRenderFns 字符串。 在经历过 parse、optimize 与 generate 这三个阶段以后,组件中就会存在渲染 VNode 所需的 render function 了。
getter:用来收集依赖 setter:用来修改 data 并触发重新渲染
vdom 比较新旧 dom,从而进一步通过打补丁更新真实 DOM。
vue 在init过程中,会遍历vue文件的data里的变量,代理到$vm上。通过defineProperty 方法 用set ,get 劫持数据的获取和设置。在render过程中 被使用的 变量 会被添加订阅,在被set的时候就会去通知。这样那些没有被使用到的变量就不会引起render更新操作。
The text was updated successfully, but these errors were encountered:
cobish 到此一游
Sorry, something went wrong.
No branches or pull requests
vue抛砖引玉
感谢cobish友情赞助ppt
目录
虚拟dom
为什么虚拟dom?我们知道dom操作是非常昂贵的,大量的dom耗时也非常可观,而虚拟dom的产生就是来解决这个问题的。
snabbdom(h, patch)
snabbdom 是一套实现虚拟dom的开源库,vue 就是借鉴了snabbdom来实现虚拟dom的。snabbdom主要有2个方法。h, patch
`function render(data) {
var newVnode = h('table',{}, data.map(function(item) {
var tds = [];
var i ;
for(i in item) {
if (item.hasOwnProperty(i)){
tds.push(h('td', {}, item[i] + ''));
}
}
return h('tr', {}, tds);
}));
if (vnode) {
patch(vnode, newVnode);
} else {
patch(container, newVnode);
}
vnode = newVnode;
由上面的方法我们可以看出,h 方法主要是创建了虚拟dom, patch方法主要是将创建的虚拟dom进行绑定或者替换。$container = $ ('#container');
`function render(data) {
var
$container.html('');
我们用jq 和 snabbdom两种render 查看页面渲染对比,可以清楚看到,使用snabbdom的render方法时,实现了最小改动,变化的数据的改动,而不是整片改动。
可见虚拟dom效果更高。
flow
Flow 是 facebook 出品的 JavaScript 静态类型检查工具。
Vue.js 的源码利用了 Flow 做了静态类型检查,所以了
解 Flow 有助于我们阅读源码。
构建
vue 使用了rollup来打包,这样打包出来的js更加简练,相对于webpack来说,没有工具添加的代码。
目录
|— build 打包相关的配置文件,其中最重要的是config.js。主要是根据不同的入口,打包为不同的文件。
流程
在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数,用来实现「响应式」以及「依赖收集」
parse 会用正则等方式解析 template 模板中的指令、class、style等数据,形成AST。
optimize 的主要作用是标记 static 静态节点,这是 Vue 在编译过程中的一处优化,后面当 update 更新界面时,会有一个 patch 的过程, diff 算法会直接跳过静态节点,从而减少了比较的过程,优化了 patch 的性能。
generate 是将 AST 转化成 render function 字符串的过程,得到结果是 render 的字符串以及 staticRenderFns 字符串。 在经历过 parse、optimize 与 generate 这三个阶段以后,组件中就会存在渲染 VNode 所需的 render function 了。
getter:用来收集依赖
setter:用来修改 data 并触发重新渲染
vdom 比较新旧 dom,从而进一步通过打补丁更新真实 DOM。
data的数据是怎么进行双向绑定的呢?
vue 在init过程中,会遍历vue文件的data里的变量,代理到$vm上。通过defineProperty 方法 用set ,get 劫持数据的获取和设置。在render过程中 被使用的 变量 会被添加订阅,在被set的时候就会去通知。这样那些没有被使用到的变量就不会引起render更新操作。
The text was updated successfully, but these errors were encountered: