当前位置：首页 > 软件库 > Web应用开发 > Vue 组件 >

vue-toy

200 行左右代码模拟 vue 实现

授权协议 MIT

开发语言 TypeScript

所属分类 Web应用开发、 Vue 组件

软件类型开源软件

地区国产

投递者澹台鸿熙

操作系统跨平台

开源组织无

适用人群未知

软件概览

vue-toy

npm install --save vue-toy

200行左右代码模拟vue实现。

Vue(options)

interface Options {
    el: HTMLElement | string;
	propsData?: Record<string, any>;
	props?: string[];
	name?: string;
	data?: () => Record<string, any>;
	methods?: Record<string, (e: Event) => void>;
	computed?: Record<string, () => any>;
	watch?: Record<string, (newValue: any, oldValue: any) => any>;
	render: (h: typeof React.createElement) => React.ReactNode;
	renderError?: (h: typeof React.createElement, error: Error) => React.ReactNode;
	mounted?: () => void;
	updated?: () => void;
	destroyed?: () => void;
	errorCaptured?: (e: Error, vm: React.ReactInstance) => void;
}

示例：

import Vue from "vue-toy";

new Vue({
  el: document.getElementById("root"),
  data() {
    return {
      msg: "hello vue toy"
    };
  },
  render(h) {
    return h("h1", null, this.msg);
  }
});

注1：vue-toy不包含template的编译实现，因为vue的template最终是编译成类似代码：

render(h) {
    with(this){
        return h("h1", null, msg);
    }
}

本教程中使用了严格模式无法使用with，所以在render里无法省略this。

注2：vue-toy的视图渲染使用的react，所以render方法的使用同react#render，如：

import Vue from "vue-toy";
import React from "react";

new Vue({
  el: document.getElementById("root"),
  data() {
    return {
      msg: "hello vue toy"
    };
  },
  render() {
    return <h1>{this.msg}</h1>
  }
});

全局 API

Vue.component(ComponentOptions)

interface ComponentOptions {
	props?: string[];
	name?: string;
	data?: () => Record<string, any>;
	methods?: Record<string, (e: Event) => void>;
	computed?: Record<string, () => any>;
	watch?: Record<string, (newValue: any, oldValue: any) => any>;
	render: (h: typeof React.createElement) => React.ReactNode;
	renderError?: (h: typeof React.createElement, error: Error) => React.ReactNode;
	mounted?: () => void;
	updated?: () => void;
	destroyed?: () => void;
	errorCaptured?: (e: Error, vm: React.ReactInstance) => void;
}

示例：

const Hello = Vue.component({
    props: ["msg"],
    render(h){
        return h('div', null, this.msg);
    }
});
export default Hello;

基本原理

// 创建观察对象
// 观察对象主要使用的是Object.defineProperty或Proxy来实现，
// 也可使用类似angular.js的脏检测(不过需要额外的检测调用)，
// 如果不在意写法也可以参考knockout或 setXXX getXXX的方式
const data = observable({
    name: 'vue-toy',
});

// 渲染模版
const render = function(){
    return <h1>{data.name}</h1>
}

// 计算render的依赖属性，
// 依赖属性改变时，会重新计算computedFn，并执行监控函数watchFn，
// 属性依赖计算使用栈及可以了。
// watch(computedFn, watchFn);
watch(render, function(newVNode, oldVNode){
    update(newVNode, mountNode);
});

//初始渲染
mount(render(), mountNode);

// 改变观察对象属性，如果render依赖了该属性，则会重新渲染
data.name = 'hello vue toy';

视图渲染部分(既render)使用的是vdom技术，vue2+使用Snabbdom库，vue-toy使用的是react来进行渲染，所以在render函数里你可以直接使用React的JSX语法,不过别忘记import React from 'react'，当然也可以使用preact inferno 等 vdom库。

由于vue的template的最终也是解析并生成render函数，模版的解析可用htmleParser库来生成AST，剩下就是解析指令并生产代码，由于工作量大，这里就不具体实现，直接使用jsx。

使用案例

使用vue-i18n进行国际化

一、相关资源 vue-i18n官网,csdn上一个可以练手的项目,这里是github地址，还有博客园上一个写的不错的文章。不过看这两篇文章最后先学过element-ui。 vue-i18n是一个前端国际化的工具，github地址。兼容vue2.00+。二、实现国际化 1、安装 $ npm i vue-i18n -D 2、在main.js中将vue-i18n注入到vue实例中 import Vu
vue路由history模式，后端配置

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: '
实现toy vue

可以使用以下步骤来实现一个简单的 Vue 应用：在 HTML 中引入 Vue 的脚本文件，如： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
vue+nodejs+element 实现drawio绘图效果

draw 项目地址：github 个人博客：smilestation.info 类似drawio效果，本项目采用前后端分离模式开发前台采用 vue + element 后端采用 nodejs 数据库采用 MySQL 文件夹说明 server 后端文件夹 client 前端文件夹主要内容说明：实线箭头 drawArrow (Object) ctx: context对象 fromX: 开始点x坐
路由(vue-router) 学习总结

目录一、简介二、引入三、使用四、嵌套(多级)路由五、命名路由(name属性) 六、路由传递参数 1、路由传参数(query参数) 2、路由传参数(params参数) 七、路由的props配置 1、路由中props第一种写法(对象类型):(没啥用) 2、路由中的props第二中写法(布尔类型)：(配合params参数,path中不用再标识params参数占位符) 3、路由中的第三种写法(函
Vue学习--------router和router懒加载

Vue学习--------router和router懒加载首先在router文件夹下面的index.js中导入vue-router import { createRouter, createWebHistory } from 'vue-router' 之后创建router const router = createRouter({ history: createWebHistory(p
vue-cli环境配置以及router使用history时的小技巧

代码根目录 .env文件打包时会被读取其中允许的值有三种 // .env NODE_ENV=不推荐修改，vue-cli打包时会根据运行serve还是build修改这个值为development还是production BASE_URL=/ 默认值是"/"，会根据vue.config.js中配置的publicPath中配置的值而改变 VUE_APP_*="*"可以是任何字符，前缀VUE_APP_不

vue-toy

vue-toy

Vue(options)

全局 API

Vue.component(ComponentOptions)

基本原理

同类工具

相关阅读

相关文章

相关问答

相关文档