「Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。官方描述的它还是一个渐进式框架,那接下来我们就尝试使用他的一部分功能看看有什么效果。」
「一、在node.js中使用Vue」
1.下载Vue 2.6.11的包 https://cdn.jsdelivr.net/npm/vue/dist/vue.js
2.构建一个node.js环境
npm run test
测试一下输出是否正常 😂😂😂
3.测试Vue在node.js中的使用
Vue本身就是用javascript开发的,从源码中可以看出它是一个用function来定义的类,多个生命周期通过Mixin混入进去,充分利用的javascript开发的特点,又将代码很好的分开来的。
const Vue = require("./vue");
const v = new Vue({
data() {
return {
name: "Name-Vue",
};
},
});
console.log(v.name);
执行这段代码,可以看到输出是: Name-Vue。
Vue实例在执行$mount的时候会调用render(),并生成对应的vdom。
const Vue = require("./vue");
const v = new Vue({
el: "#demo",
render: function (h) {
return "<div>{{ name }}</div>";
},
data() {
return {
name: "Name-Vue",
};
},
});
console.log(v);
当执行以下代码的时候,它会报这个错误ReferenceError: document is not defined
这是因为Vue要挂载到一个节点上,Vue操作的是浏览器dom,那怎么办呢?
通过查看源码目录结果,我们发现Vue原生是支持web与weex两个平台的,这个weex就是阿里那个跨平台的框架。web平台使用的就是浏览器的dom,而weex则定义一套与浏览器dom类似的api,这样Vue在上层使用的时候就统一了接口,不同的平台根据自己的需要实现对应的dom操作的api与patch函数。weex的具体实现在这里::https://github.com/apache/incubator-weex/tree/master/runtime/vdom
接下来,我们将利用weex的非浏览器dom实现,在非浏览器环境中使用Vue.
4.生成weex-vue-framework.js
下载weex源码: https://github.com/apache/incubator-weex
使用以下命令编译出weex-vue-framework.js
npm run build:native
稍等片刻,得到如下输出,再将weex-js-framework导入到工程当中
修改代码如下:
const Weex = require("./weex-js-framework");
/// 创建一个环境,指定一个名称,可以认为它就是一个类似浏览器的环境
const context = Weex.createInstanceContext("1");
/// 从上下文中获取Vue
const Vue = context.Vue;
/// 正常使用Vue的实例代码
const v = new Vue({
el: "#demo",
render: function (createElement) {
return createElement("div", this.name);
},
data() {
return {
name: "Name-Vue",
};
},
});
console.log(v);
源码的这段代码会提示错误,因为我们并非是基于服务器渲染,为了简单直接改成false
// _isServer = global['process'].env.VUE_ENV === 'server';
_isServer = false;
上面的实例代码打印出Vue的实现对象v结果如下图:
可以看到Vue正确的构建出了vdom
进一步打印出v._vnode.children[0]这个节点可以看到,在weex的实现下构建了一个为TextNode的节点,他的值正是this.name的值。
增加Vue的生命周期函数,看看效果:
created() {
console.log("created");
},
mounted() {
console.log("....mounted");
},
测试发现能正常输出。
到此,我们已经将Vue成功的运行在非浏览器环境当中了,这意味着,我们可以脱离浏览器环境构建可用于任何平台的Dom。
后面我们将基于这个尝试做一个有趣的事情,在Javascript Core中运行Vue编译的代码,并提取渲染树。
原文始发于微信公众号（程序猿搬砖）：Vue在非浏览器环境下的尝试
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/71974.html
