将导入网页的vue.js配合class关键字使用|使用转换方法将js class转换为vue对象

核心代码：

 

 1             /** 
 2              * @method 将一个class对象转换为vue对象的函数
 3              * @param {string} elname 根据CSS选择器选择vue对象绑定的网页元素
 4              */
 5             function ConstructVueObject(instance,elname){
 6                 const members = {
 7                     el: elname,
 8                     data: { class: instance },
 9                     computed: {},
10                     method: {}
11                 };
12                 const proto = Object.getPrototypeOf(instance); //得到原型对象
13                 const properties = Object.getOwnPropertyNames(proto); //获取原型对象上的所有属性
14                 for (const key of properties) {
15                     if(String(key) == "constructor")
16                         continue;
17                     members.method[key] = instance[key];
18                 }
19                 for(const key in instance){
20                     members.computed[key] = {
21                         get(){
22                             return this.class[key];
23                         },
24                         set(value){
25                             this.class[key] = value;
26                         }
27                     }
28                 }
29                 return members;
30             }

其作用很简单，把一个你自己的对象传入，它会根据vue初始化对象的格式将成员变量和成员函数取出，把除了构造方法以外的方法放入method，把成员变量放入computed并自动实现getter和setter，最后返回构造出的对象，由你自己注册进vue

使用方法：

class Myclass{
    count = 1;
    name = "";

    tostring(){ return `${this.name}:${this.count}` }

    // ...
}

const App = new Vue(ConstructVueObject(new Myclass(),"#elementId"));

然后你就可以像面向对象一样编写JS代码了！你甚至可以搭配typescript使用它。所有操作都可以在class内部进行，this也会正常的指向Myclass。

注意，它仅适用于网页导入vue.js使用的情况，适合小型网页或其他轻量级度使用vue的情况，如果你用vue脚手架构建了项目，还是老老实实用原来的写法吧。

如果你想使用组件，你可以使用这个方法：

            /** 
             * @method 从网页中找到所有class为.component的元素，将他们注册为vue组件
             * @param {Array<string>} prop 可选，添加props
             */
            function ConstructVueComponentsAll(prop = []){
                const componentElements = document.querySelectorAll(".component");
                if(componentElements.length == 0)
                    return console.log("未找到组件元素");

                componentElements.forEach(function(element) {
                    let component = {
                        props: prop,
                        template: element.innerHTML
                    };
                    Vue.component(element.nodeName.toLowerCase(),component); //注册全局组件
                    element.classList.remove("component");
                });
            }

你可以直接把组件写在html里面，给元素加上“component”的css类，调用组件构造方法时，它会找到网页中全部带有“component”的元素，并把它们注册为全局组件（你应当在注册任意一个vue组件前调用这个方法，如果你用了组件）

非全局组件的情况，可以直接修改构造vue方法返回的对象，给他加上template属性再放进vue，或者你可以扩写我的方法让它更好用。

目前，我在使用了vue2和springboot的项目中使用这一套工作流程没有出现问题，vue3没有试过，但差别应该不大。

 

你可以直接把这些代码用在你的项目里（包括商业项目），也可以任意修改，发布你自己修改后代码的博文，但是发布时请标明出处和链接。