JavaScript之实现一个简单的Vue示例
内容摘要
这篇文章主要为大家详细介绍了JavaScript之实现一个简单的Vue示例,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记!
vue的使用相信大家都很
对此感兴趣的朋友,看看idc笔记做的技术笔记!
vue的使用相信大家都很
文章正文
这篇文章主要为大家详细介绍了JavaScript之实现一个简单的Vue示例,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记!
vue的使用相信大家都很熟练了,使用起来简单。但是大部分人不知道其内部的原理是怎么样的,今天我们就来一起实现一个简单的vue
Object.defineProperty()
实现之前我们得先看一下Object.defineProperty的实现,因为vue主要是通过数据劫持来实现的,通过get
、set
来完成数据的读取和更新。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <code> var obj = {name: 'wclimb' } var age = 24 Object.defineProperty(obj, 'age' ,{ enumerable: true, // 可枚举 configurable: false, // 不能再define get () { return age }, set (newVal) { console.log( '我改变了' ,age + ' -> ' +newVal); age = newVal } }) > obj.age > 24 > obj.age = 25; > 我改变了 24 -> 25 > 25</code> |
从上面可以看到通过get
获取数据,通过set
监听到数据变化执行相应操作,还是不明白的话可以去看看Object.defineProperty文档。
流程图
【图片暂缺】
html代码结构
代码如下:
1 2 3 4 5 6 7 8 | <code> <div id= "wrap" > <p v-html= "test" ></p> <input type= "text" v-model= "form" > <input type= "text" v-model= "form" > <button @click= "changeValue" >改变值</button> {{form}} </div></code> |
js调用
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <code> new Vue({ el: '#wrap' , data:{ form: '这是form的值' , test: '<strong>我是粗体</strong>' , }, methods:{ changeValue(){ console.log(this.form) this.form = '值被我改变了,气不气?' } } })</code> |
Vue结构
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 | <code> class Vue{ constructor(){} proxyData(){} observer(){} compile(){} compileText(){} } class Watcher{ constructor(){} update(){} }</code> |
- Vue constructor 构造函数主要是数据的初始化
- proxyData 数据代理
- observer 劫持监听所有数据
- compile 解析dom
- compileText 解析dom里处理纯双花括号的操作
- Watcher 更新视图操作
Vue constructor 初始化
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <code> class Vue{ constructor(options = {}){ this. $el = document.querySelector(options.el); let data = this.data = options.data; // 代理data,使其能直接this.xxx的方式访问data,正常的话需要this.data.xxx Object.keys(data).forEach((key)=> { this.proxyData(key); }); this.methods = options.methods // 事件方法 this.watcherTask = {}; // 需要监听的任务列表 this.observer(data); // 初始化劫持监听所有数据 this.compile(this. $el ); // 解析dom } }</code> |
上面主要是初始化操作,针对传过来的数据进行处理
proxyData 代理data
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <code> class Vue{ constructor(options = {}){ ...... } proxyData(key){ let that = this; Object.defineProperty(that, key, { configurable: false, enumerable: true, get () { return that.data[key]; }, set (newVal) { that.data[key] = newVal; } }); } }</code> |
上面主要是代理data
到最上层,this.xxx
的方式直接访问data
observer 劫持监听
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <code> class Vue{ constructor(options = {}){ ...... } proxyData(key){ ...... } observer(data){ let that = this Object.keys(data).forEach(key=>{ let value = data[key] this.watcherTask[key] = [] Object.defineProperty(data,key,{ configurable: false, enumerable: true, get(){ return value }, set(newValue){ if (newValue !== value){ value = newValue that.watcherTask[key].forEach(task => { task.update() }) } } }) }) } }</code> |
同样是使用Object.defineProperty
来监听数据,初始化需要订阅的数据。
把需要订阅的数据到push
到watcherTask
里,等到时候需要更新的时候就可以批量更新数据了。
注:关于JavaScript之实现一个简单的Vue示例的内容就先介绍到这里,更多相关文章的可以留意
代码注释