一、写在开头
vue3.0通过proxy对vue进行了重构,那么今天我们就来通过proxy来实现一版自己的vue框架吧
看完该文,您将学到
- proxy与Object.defineProperty的区别
- 通过proxy进行数据劫持的方法
- esModule的模块化思想
- Map数据类型的使用
- 通过正则进行匹配渲染视图
- 实现vue的数据双向绑定
- 实现vue的v-module
- 实现vue中的v-bind
- 实现vue中的v-if
- 实现vue中的v-on
ok ! 打开电脑,跟我一起一步步将他实现出来吧!!!
二、关于proxy
proxy和Object.definedproperty都可以对数据进行劫持,那么vue3.0中为什么会弃用
Object.definedproperty转而使用proxy呢?这是因为Object.definedproperty有一些弊端,如下:
- 无法很好的监听数组变化
- Object.definedproperty只能劫持对象的属性,对新增属性需要手动进行 Observe, 但是proxy是直接代理对象,无论是写法还是复杂度或者性能方面考虑,都是选择proxy的理由
下面我们先简单的学习一下proxy的用法:
let object = {
num: 0, name: 'liming' };
// 根据observed包装后,在get的时候获取值,set的时候修改值
function reactive(obj) {
let observed = new Proxy(obj, {
get: function (obj, prop) {
// obj代表所以对象 {name: "张三", age:12} props 代表获取谁
console.log(obj, prop);
return obj[prop];
},
set: function (obj, prop, value) {
// obj代表所以对象 {name: "张三", age:12} props 代表替换谁 value 代表要替换的值
console.log(obj, prop, value);
obj[prop] = value;
return true;
},
});
return observed;
}
let result = reactive(object);
console.log(result.num, '///');
result.name = 'xiaohua';
console.log(object, 'object');
解释一下上面的代码,我们封装来一个reactive方法,在里面new了一个Proxy对象,这是我们创建的变量object会被这个对象劫持,那么当我们获取这个对象的属性值的时候会触发get方法,当我们修改对象中的属性值的时候就会触发set方法。 有了这个方法后我们就离劫持数据进行绑定不远了。
三、 实现模版的渲染
学习了双向绑定的核心之后,我们回过头来,创建一个html文件,先将数据渲染到页面上,看一下效果。
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
{
{ message }}
<input v-model="message" />
</div>
</body>
<script type="module">
import {
RockVue as Vue } from './rockvue.js';
new Vue({