手撕Vue-构建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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具