【源码】vue3 为什么说跨平台能力更强

【公司内部分享】探索Vue.js框架内部原理和实现机制，旨在理解其核心概念和技术细节，以便更好地应用和定制Vue.js。

相关文章

vue3 为什么说跨平台能力更强

一、渲染器 API

Vue 3 引入了渲染器 API，使得可以自定义渲染目标。这意味着 Vue 3 可以将组件渲染到各种不同的目标上，从而支持更多的应用场景和平台。

二、createRenderer

用于创建一个自定义渲染器。它接受一个包含渲染器选项的对象作为参数，并返回一个渲染器实例。渲染器选项对象包含用于控制渲染过程的方法，比如 createElement、patchProp、insert 和 remove 等。

createElement(type: string, props?: Object, children?: string | VNode | VNode[]) => VNode：创建一个虚拟节点。
patchProp(el: Element, key: string, prevValue: any, nextValue: any, isSVG?: boolean, prevChildren?: VNode[])：更新 DOM 元素的属性。这个方法用于在更新期间对 DOM 元素的属性进行处理。
insert(child: Node, parent: Node, anchor?: Node | null)：将节点插入到父节点中。用于处理新节点的插入。
remove(child: Node)：从父节点中移除节点。用于处理节点的移除。

二、应用场景

服务器端渲染（SSR）

渲染器 API 可以用于在服务器端渲染 Vue 组件，生成 HTML，并将其发送给客户端。这对于提高首屏加载性能和 SEO 非常有用。

const express = require('express');
const { createRenderer } = require('vue');
const { renderToString } = require('@vue/server-renderer');

const app = express();

// 创建自定义渲染器
const renderer = createRenderer({
  // 创建虚拟节点
  createElement(type, props, children) {
    return {
      type,
      props,
      children
    };
  },
  // 更新 DOM 元素的属性
  patchProp(el, key, prevValue, nextValue) {
    el.setAttribute(key, nextValue);
  },
  // 将节点插入到父节点中
  insert(child, parent, anchor) {
    if (anchor) {
      parent.insertBefore(child, anchor);
    } else {
      parent.appendChild(child);
    }
  },
  // 从父节点中移除节点
  remove(child) {
    child.parentNode.removeChild(child);
  }
});

// 定义一个简单的 Vue 组件
const App = {
  data() {
    return {
      message: 'Hello, Vue 3 Server-Side Rendering!'
    };
  },
  // 渲染函数，返回一个 VNode
  render() {
    return {
      type: 'div',
      children: this.message
    };
  }
};

// 处理路由
app.get('/', async (req, res) => {
  try {
    // 渲染 Vue 组件为字符串
    const html = await renderToString(renderer, App);
    res.send(html);
  } catch (error) {
    res.status(500).send('Server Error');
  }
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

静态网站生成器（SSG）

渲染器 API 可以用于在构建时（而不是在运行时）将 Vue 组件渲染为静态 HTML 文件，从而实现静态网站生成器的功能。

const fs = require('fs');
const path = require('path');
const { createRenderer } = require('vue');
const { renderToString } = require('@vue/server-renderer');

// 创建自定义渲染器
const renderer = createRenderer({
  // 创建虚拟节点
  createElement(type, props, children) {
    return {
      type,
      props,
      children
    };
  },
  // 更新 DOM 元素的属性
  patchProp(el, key, prevValue, nextValue) {
    el.setAttribute(key, nextValue);
  },
  // 将节点插入到父节点中
  insert(child, parent, anchor) {
    parent.insertBefore(child, anchor);
  },
  // 从父节点中移除节点
  remove(child) {
    child.parentNode.removeChild(child);
  }
});

// 定义一个简单的 Vue 组件
const App = {
  data() {
    return {
      title: 'Static Site Generator',
      content: 'This is a static site generated by Vue and custom renderer.'
    };
  },
  // 渲染函数，返回一个 VNode
  render() {
    return {
      type: 'html',
      children: [
        {
          type: 'head',
          children: [
            { type: 'title', children: this.title }
          ]
        },
        {
          type: 'body',
          children: [
            { type: 'h1', children: this.title },
            { type: 'p', children: this.content }
          ]
        }
      ]
    };
  }
};

// 渲染 Vue 组件为 HTML 字符串
renderToString(renderer, App).then(html => {
  // 保存 HTML 字符串到静态文件
  fs.writeFileSync(path.resolve(__dirname, 'index.html'), html);
  console.log('Static site generated successfully!');
}).catch(error => {
  console.error('Error generating static site:', error);
});

桌面应用程序

渲染器 API 可以用于将 Vue 组件渲染到桌面应用程序的窗口中，从而实现基于 Web 技术的桌面应用程序。

const { app, BrowserWindow } = require('electron');
const { createRenderer } = require('vue');

// 创建自定义渲染器
const renderer = createRenderer({
  // 创建虚拟节点
  createElement(type, props, children) {
    return {
      type,
      props,
      children
    };
  },
  // 更新 DOM 元素的属性
  patchProp(el, key, prevValue, nextValue) {
    el.setAttribute(key, nextValue);
  },
  // 将节点插入到父节点中
  insert(child, parent, anchor) {
    parent.insertBefore(child, anchor);
  },
  // 从父节点中移除节点
  remove(child) {
    child.parentNode.removeChild(child);
  }
});

// 创建 Vue 应用
const App = {
  data() {
    return {
      message: 'Hello, Desktop App!'
    };
  },
  // 渲染函数，返回一个 VNode
  render() {
    return {
      type: 'div',
      children: this.message
    };
  }
};

// 等待 Electron 准备就绪
app.whenReady().then(() => {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 加载 Vue 组件到窗口中
  mainWindow.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent('<div id="app"></div>'));

  // 渲染 Vue 组件到窗口中
  renderer.render(createVNode(App), mainWindow.document.getElementById('app'));
});

移动应用程序

渲染器 API 可以用于将 Vue 组件渲染到移动应用程序的 WebView 中，从而实现基于 Web 技术的移动应用程序。

const { createRenderer } = require('vue');
const { createApp } = require('vue');
const { defineComponent, h } = require('vue');
const WebView = require('react-native-webview');

// 创建自定义渲染器
const renderer = createRenderer({
  // 创建虚拟节点
  createElement(type, props, children) {
    return {
      type,
      props,
      children
    };
  },
  // 更新 DOM 元素的属性
  patchProp(el, key, prevValue, nextValue) {
    el.setAttribute(key, nextValue);
  },
  // 将节点插入到父节点中
  insert(child, parent, anchor) {
    parent.insertBefore(child, anchor);
  },
  // 从父节点中移除节点
  remove(child) {
    child.parentNode.removeChild(child);
  }
});

// 定义一个简单的 Vue 组件
const App = defineComponent({
  data() {
    return {
      message: 'Hello, Mobile App!'
    };
  },
  // 渲染函数，返回一个 VNode
  render() {
    return h('div', this.message);
  }
});

// 创建 Vue 应用实例
const app = createApp(App);

// 使用自定义渲染器渲染应用程序
app.use({
  install(app) {
    app.config.globalProperties.$renderer = renderer;
  }
});

// 将应用程序挂载到 WebView 中
WebView.injectJavaScript(`
  const root = document.createElement('div');
  document.body.appendChild(root);
  app.mount(root);
`);

小程序

渲染器 API 可以用于将 Vue 组件渲染到小程序的自定义组件中，从而实现在小程序中使用 Vue 的功能。

Vue 组件 MyComponent

const { createApp, h } = require('vue');

// 定义一个简单的 Vue 组件
const MyComponent = {
data() {
    return {
    message: 'Hello, Mini Program!'
    };
},
// 渲染函数，返回一个 VNode
render() {
    return h('view', {}, this.message);
}
};

// 创建 Vue 应用实例
const app = createApp(MyComponent);

// 将 Vue 组件挂载到 DOM 中
const vnode = app.mount();

微信小程序自定义组件 vue-component 的 vue-component.wxml 文件
1
<web-view id="web-view" src="{{ src }}"></web-view>

微信小程序页面中引入 vue-component 组件

1 2	`<import src="../components/vue-component.vue" /> <vue-component src="{{ vueSrc }}"></vue-component>`

微信小程序页面中的逻辑部分

Page({
data: {
    vueSrc: 'data:text/html;charset=utf-8,' + encodeURIComponent('<div id="app"></div>')
},
onReady: function () {
    // 使用微信小程序自定义组件的接口获取 web-view 组件实例
    const webView = this.selectComponent('#web-view');

    // 在 web-view 组件中渲染 Vue 组件
    webView.postMessage({
    type: 'render',
    vnode: vnode
    });
}
});

其他自定义渲染目标

渲染器 API 还可以用于将 Vue 组件渲染到其他自定义渲染目标上，例如 Canvas、PDF、SVG 等。

Canvas

const { createRenderer } = require('vue');

// 创建自定义渲染器
const renderer = createRenderer({
// 创建虚拟节点
createElement(type, props, children) {
    return {
    type,
    props,
    children
    };
},
// 更新 DOM 元素的属性
patchProp(el, key, prevValue, nextValue) {
    // 不需要更新 Canvas 上的属性
},
// 将节点插入到父节点中
insert(child, parent, anchor) {
    // 不需要将节点插入到 Canvas 中
},
// 从父节点中移除节点
remove(child) {
    // 不需要从 Canvas 中移除节点
}
});

// 定义一个简单的 Vue 组件
const MyComponent = {
data() {
    return {
    message: 'Hello, Canvas!'
    };
},
// 渲染函数，返回一个 VNode
render() {
    return {
    type: 'text',
    props: {
        x: 50,
        y: 50,
        text: this.message,
        fillStyle: 'black'
    }
    };
}
};

// 创建 Vue 应用实例
const { createApp, h } = require('vue');
const app = createApp(MyComponent);

// 使用自定义渲染器渲染应用程序
const vnode = app.mount();

// 获取 Canvas 元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 渲染组件到 Canvas 上
renderer.render(vnode, ctx);

pdf

import { createApp } from 'vue';
import jsPDF from 'jspdf';

// 创建自定义渲染器
const renderer = {
// 创建虚拟节点
createElement(type, props, children) {
    return {
    type,
    props,
    children
    };
},
// 更新 DOM 元素的属性
patchProp(el, key, prevValue, nextValue) {
    // 不需要更新 PDF 上的属性
},
// 将节点插入到父节点中
insert(child, parent, anchor) {
    // 不需要将节点插入到 PDF 中
},
// 从父节点中移除节点
remove(child) {
    // 不需要从 PDF 中移除节点
}
};

// 定义一个简单的 Vue 组件
const MyComponent = {
data() {
    return {
    message: 'Hello, PDF!'
    };
},
// 渲染函数，返回一个 VNode
render() {
    return {
    type: 'text',
    props: {
        x: 10,
        y: 10,
        text: this.message,
        fontSize: 12
    }
    };
}
};

// 创建 Vue 应用实例
const app = createApp(MyComponent);

// 使用自定义渲染器渲染应用程序
const vnode = app.mount();

// 创建 PDF 实例
const pdf = new jsPDF();

// 渲染组件到 PDF 上
renderer.render(vnode, {
drawText(text, x, y, options) {
    pdf.text(text, x, y, options);
}
});

// 保存 PDF 文件
pdf.save('example.pdf');

svg

const { createApp } = require('@vue/runtime-core');

// 创建自定义渲染器
const renderer = {
// 创建虚拟节点
createElement(type, props, children) {
    return {
    type,
    props,
    children
    };
},
// 更新 DOM 元素的属性
patchProp(el, key, prevValue, nextValue) {
    el.setAttribute(key, nextValue);
},
// 将节点插入到父节点中
insert(child, parent, anchor) {
    parent.appendChild(child);
},
// 从父节点中移除节点
remove(child) {
    child.parentNode.removeChild(child);
}
};

// 定义一个简单的 Vue 组件
const MyComponent = {
data() {
    return {
    message: 'Hello, SVG!'
    };
},
// 渲染函数，返回一个 VNode
render() {
    return {
    type: 'svg',
    props: {
        width: '200',
        height: '200'
    },
    children: [
        {
        type: 'text',
        props: {
            x: '10',
            y: '50',
            fill: 'black'
        },
        children: this.message
        }
    ]
    };
}
};

// 创建 Vue 应用实例
const app = createApp(MyComponent);

// 使用自定义渲染器渲染应用程序
const vnode = app.mount();

// 创建 SVG 元素
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

// 渲染组件到 SVG 上
renderer.insert(vnode, svg, null);

// 将 SVG 添加到 DOM 中
document.body.appendChild(svg);

源码

#vue #源码

【源码】vue3 为什么说跨平台能力更强

https://www.cccccl.com/20240301/源码/vue/vue3 为什么说跨平台能力更强/

作者

Jeffrey

发布于

2024年3月1日

许可协议

【源码】vue3 速度与体积上的优化上一篇

【性能优化】怎样去优化Long Task 下一篇