手撕Vue-构建Vue实例

合集 - 手写Vue全家桶(16)
1.Vue双向数据绑定原理-上2.Vue双向数据绑定原理-中3.Vue双向数据绑定原理-下
4.手撕Vue-构建Vue实例
5.手撕Vue-提取元素到内存6.手撕Vue-查找指令和模板7.手撕Vue-编译指令数据8.手撕Vue-编译模板数据9.手撕Vue-监听数据变化10.手撕Vue-数据驱动界面改变上11.手撕Vue-数据驱动界面改变中12.手撕Vue-数据驱动界面改变下13.手撕Vue-界面驱动数据更新14.手撕Vue-实现事件相关指令15.手撕Vue-实现将数据代理到Vue实例16.手撕Vue-实现计算属性
收起

前言

要想使用Vue必须先创建Vue的实例, 创建Vue的实例通过new来创建, 所以说明Vue是一个类, 所以我们要想使用自己的Vue, 就必须定义一个名称叫做Vue的类。

只要创建好了Vue的实例，Vue就会根据指定的区域和数据，去编译渲染这个区域，所以我们需要在自己编写的Vue实例中拿到数据和控制区域，去编译渲染这个区域。

!> 注意点：创建Vue实例的时候指定的控制区域可以是一个ID名称, 也可以是一个Dom元素

指定控制区域是一个ID名称的情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本模板</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name">
    <p>{{ name }}</p>
    <p>{{age}}</p>
    <ul>
        <li>6</li>
        <li>6</li>
        <li>6</li>
    </ul>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            name: "BNTang",
            age: 33
        }
    });
</script>
</body>
</html>

指定控制区域是一个Dom元素的情况：

<script>
    let vue = new Vue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang",
            age: 33
        }
    });
</script>

测试结果不展示了。

!> 注意点：Vue实例会将传递的控制区域和数据都绑定到创建出来的实例对象上（$el/$data）

<script>
    let vue = new Vue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang",
            age: 33
        }
    });
    console.log(vue.$el);
    console.log(vue.$data);
</script>

注意点介绍完了，我们开始手撕Vue吧。经过上面的分析，我们知道Vue是一个类，所以我们需要定义一个名称叫做Vue的类，我这里叫 Nue。

class Nue {
    constructor(options) {
    }
}

分析一下 Vue，我们在创建 Vue 实例的时候传递的是一个对象，所以我这里在构造函数中用 options 来接收这个对象。

然后对象中有两个属性，一个是 el，一个是 data，我们需要将这两个属性挂载到 Nue 的实例上，所以我们需要在构造函数中定义两个属性，一个是 $el，一个是 $data。

$el 是一个 Dom 元素，我们需要将传递的 el 转换成 Dom 元素，所以我们需要判断一下传递的 el 是一个字符串还是一个 Dom 元素，如果是字符串，我们就通过 querySelector 来获取这个 Dom 元素，如果是 Dom 元素，我们就直接将这个 Dom 元素赋值给 $el。

$data 是一个对象，我们直接将传递的 data 赋值给 $data。

所以我这里封装了一个方法用于判断 $el 是否是一个元素，方法名叫做 isElement：

isElement(node) {
    return node.nodeType === 1;
}

封装之后我们的代码就变成了这样：

class Nue {
    constructor(options) {
        if (this.isElement(options.el)) {
            this.$el = options.el;
        } else {
            this.$el = document.querySelector(options.el);
        }
        this.$data = options.data;
    }

    isElement(node) {
        return node.nodeType === 1;
    }
}

接下来我们调用我们自己的 Nue 类，看看是否能够正常的创建 Vue 实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本模板</title>
    <script src="js/nue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name"/>
    <p>{{ name }}</p>
    <p>{{age}}</p>
    <ul>
        <li>6</li>
        <li>6</li>
        <li>6</li>
    </ul>
</div>

<script>
    let vue = new Nue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang",
            age: 33
        }
    });

    console.log(vue.$el);
    console.log(vue.$data);
</script>
</body>
</html>
posted @   BNTang  阅读(71)  评论(0)  编辑  收藏  举报
相关博文：
·  『手撕Vue-CLI』自定义指令
·  手撕Vuex-Vuex实现原理分析
·  Vue.js 搭建Vue开发环境（p4~p6）
·  1. 初识Vue
·  VUE学习day one
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示