「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 "

";
  },
  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编译的代码,并提取渲染树。