type
Post
status
Published
date
May 4, 2022
slug
vue-template
summary
用原生html和JS实现简易的vue的双向数据绑定以及模板解析的操作
tags
开发
Vue
JavaScript
前端
category
技术分享
icon
password
参考B站up蛋老师是的视频学习了一下vue的双向数据绑定以及模板解析的操作，实在是太巧妙了！视频地址
直接放代码，前端部分，参考vue的写法，这里的data是一个普通的对象，vue官网的data是一个函数，官方的写法应该是为了数据绑定做出的优化，但是没有了解过相关原理，所有暂时还不太理解二者的区别。
HTML部分参考官方的写法，本次的demo主要实现文本渲染、输入框的v-model监听，以及数据绑定
JS部分
🗒️总结
视频看了两遍，全程跟着敲，第一遍还不太理解Watcher类是如何绑定对于数据的监听的，而且不太理解getter和setter的触发的巧妙之处。
Watcher其实就是在虚拟dom添加至页面的时候，将每一个在页面中要被渲染的值进行监听。
监听的本质就是将data中的一个值于Watcher的一个实例对象所提供的callback函数绑定在一起，每当setter函数被触发，及data中的值发生了改变，则调用callback函数。
Dependency类中存储了所有的Watcher实例，此处demo中对于通知Watcher进行更新的方法是，一旦setter被触发就通知Dependency.subscriber中的所有watcher进行更新，Watcher实例自带的update函方法可以找到自己正在监听的数据，并从根实例vm中获取最新的数据值并调用自身的callback函数。
callback是在解析数据的同时对Watcher实例化的时候传入的，所以callback可以直接访问到数据要解析的目标dom，当Watcher接收到了新的值，就可以直接对dom进行重新渲染，也就实现了所谓的“双向绑定”。