位置: IT常识 - 正文
推荐整理分享【手撕源码】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永久关闭桌面弹出广告)
友情链接: 武汉网站建设