vue的第一份正式源码

Tikitoo 发布于2019-08-14 15:06 / 2226人阅读

摘要：提交这可以说是的第一份正式源码，已经有了基本的骨架原型。上面所说的绑定操作都是针对于这个来的。如则在模板中声明一个指令的时候，即实现了指令与的绑定。如上便是当前版本的基本运行原理。

提交：a5e27b1174e9196dcc9dbb0becc487275ea2e84c
commit: naive implementation

这可以说是vue的第一份正式源码，已经有了基本的骨架原型。

源码主要包含三个文件: main.js、directives.js、filters.js

运行原理：

节点收集，找到根节点以及根节点之下的所有包含指令的节点.

解析指令节点

关联数据与节点

监测指令节点的set操作，并调用指令的更新函数

伪代码：

/*根节点以及所有指令节点获取，这里指令节点的selector采用属性选择器来选择*/
root = document.getElementById(opts.id),
els  = root.querySelectorAll(selector)

/**
 * 节点处理
 */
;[].forEach.call(els, processNode)
processNode(root)

/**
 * processNode中主要做了如下三步
 */
parseDirective()
bindDirective()
bindAccessors()

这里需要注意一点是 scope 的概念，vue是采用数据响应式的思想，这里的数据即对应一个vue实例里的 scope(也可称它为作用域，最新版本已改为data/vueInstance.$data)。上面所说的绑定操作都是针对于这个scope来的。

如：

scope = {
    hello: "ahahah"
}

则在模板中声明一个v-text="hello"指令的时候，即实现了v-text指令与scope.hello的绑定。

如上便是当前版本vue的基本运行原理。

作者设计思想解读

通过指令的声明方式实现某一DOM片段与某一javascript对象的关联

数值关联，JS中的一个 String 对应于DOM中的一个或多个 textNode

函数关联，JS中的一个方法对应于DOM节点的事件函数

set监测

通过如下示例来观看作者指令语法的设计思想：

模板


    
    YOYOYO

var Seed = require("seed")
var app = Seed.create({
    id: "test",
    // template
    scope: {
        msg: "hello",
        hello: "WHWHWHW",
        changeMessage: function () {
            app.scope.msg = "hola"
        }
    }
})

指令语句即 DOM 节点中的一个属性，如sd-text="msg | capitalize",等号前面为指令的名称，等号后面为指令的值。

受于字符串所能表达信息量的限制，作者在指令名称上采用 "-" 让指令名变成结构类型的数据，以此来增加指令的灵活性(标签的属性是不区分大小写的，所以不能采用驼峰式的命名).值对应组件作用域中的一个键名，这里通过管道符可以扩展相应的功能。

实质上来说，与普通的变量声明方式是一样的：

/*javascript 变量声明*/
var text = "ahahah";
var onClick = function changeMessage () {};

/*vue 指令声明, hello 和 changeMessage 则对应 scope 中的 hello 和 changeMessage的值*/
v-text="hello";
v-on-click="changeMessage";

注：组件对象数据与指令关联是一对多的关系

这样，一个微型的vue就成型了。

GPU云服务器云服务器第一份 php一周的第一天本月的第一天js 中国的第一条互联网专线

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/65286.html

性能优化

摘要：如果你的运行缓慢，你可以考虑是否能优化请求，减少对的操作，尽量少的操，或者牺牲其它的来换取性能。在认识描述这些核心元素的过程中，我们也会分享一些当我们构建的时候遵守的一些经验规则，一个应用应该保持健壮和高性能来维持竞争力。一个开源的前端错误收集工具 frontend-tracker，你值得收藏~ 蒲公英团队最近开发了一款前端错误收集工具，名叫 frontend-tracker ，这款...

liangzai_cool 2019-08-22 13:45 评论0 收藏0
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

Profeel 2019-08-21 10:51 评论0 收藏0
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

ChanceWong 2019-08-01 15:21 评论0 收藏0
axios源码阅读（一）

摘要：开始研究核心代码这个类首先是构造函数看完上面的内容大家应该有点印象，上挂了和，是默认的配置，顾名思义就是拦截器，目测包含了和两种类型。喜欢就点个赞吧参考文章源代码重点难点分析源代码重点难点分析 axios是一个基于promise的http库，支持浏览器和node端，最近我在做beauty-we的api设计，研读一个成熟的http库势在必行，axios功能完整、api简洁、注释清晰，再适...

k00baa 2019-08-22 18:26 评论0 收藏0