位置: IT常识 - 正文
【手撕源码】vue2.x双向数据绑定原理(手撕代码题目集锦)
编辑：rootadmin【手撕源码】vue2.x双向数据绑定原理 
本文链接地址:https://www.jiuchutong.com/zhishi/299131.html
转载请保留说明！
推荐整理分享【手撕源码】vue2.x双向数据绑定原理(手撕代码题目集锦)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:什么叫手撕代码,手撕代码,手撕算法是写伪代码吗,手撕代码题目集锦,什么叫手撕代码,什么叫手撕代码,手撕代码题目集锦,手撕代码,内容如对您有帮助，希望把文章链接给更多的朋友！
🐱 个人主页：不叫猫先生 🙋♂️ 作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！ 💫系列专栏：vue3从入门到精通、TypeScript从入门到实践 📢 资料领取：前端进阶资料以及文中源码可以找我免费领取 🔥 前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)
目录前言一、index.html文件二、vue.js文件1.proxy代理发生了什么？2.observer监听数据3.订阅者Watcher4.订阅器Dep5.编译器Compiler三、文中用到的js基础1.reg.exec2.reg.test3.RegExp.$x4.startsWith四、源码前言双向数据绑定原理主要运用了发布订阅模式来实现的，通过Object.defineProperty对数据劫持，触发getter，setter方法。数据变化时通知订阅者watcher触发回调视图更新。主要有四个重要的角色：
监听器Observer：劫持并监听所有属性，如果有变动的，就通知订阅者。订阅器 Dep：收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理订阅者Watcher：收到属性的变化通知并执行相应的函数，从而更新视图。解析器Compile：扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器 一、index.html文件写一个简易的vue代码，实例化Vue
<script type="module">import { Vue } from "./vue.js "let vm = new Vue({el: document.querySelector('#app'),data: {message: "Hello,luyu",num: "33"},methods: {increase() {this.num++;},}})</script><div id="app"><h1>{{message}}</h1><h2>{{num}}</h2><input type="text" v-model="message"><input type="text" v-model="num"><button v-on:click="increase">【+】</button></div>二、vue.js文件在vue的原型对象添加_init方法进行初始化，主要干这几件事：
接受传过来的options，并下一篇：Windows11去掉桌面快捷方式箭头 Windows11怎么去掉快捷方式箭头(win11永久关闭桌面弹出广告)