vue对templete中响应式数据的依赖收集.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

数据采集

24 浏览量 2024-01-03 01:44:11 上传评论收藏 1KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

vue对templete中响应式数据的依赖收集.zip （1个子文件）

vue_dep-main

vue_demo.html 2KB

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue对templete中响应式数据的依赖收集</title></head> <body> <div id="app"> <p>姓名: <span>{{name}}</span></p> <p>年龄: <span>{{age}}</span></p> </div> <script> window.onload = function () { // new一个vue实例 let vue = new Vue( { el: '#app', data: { name: '加载中', age: '18' } } ) // 2s后更新页面的信息 setTimeout(() => { // 4. 更改templete中data的值时，会促发setter vue.$data.name = 'Chris Wu'; vue.$data.age = 20; }, 2000) } class Vue { constructor(options) { this.options = options this.$data = options.data this.observe(options.data) this.compile(document.querySelector(options.el)) } observe(data) { Object.keys(data).forEach(key => { let observer = new Dep() let value = data[key] Object.defineProperty(data, key, { get() { // 3.观察者对象添加对应的dom节点 Dep.target && observer.add(Dep.target) return value }, set(newValue) { value = newValue // 5. 属性值变化时，更新Dep依赖中所有节点 observer.update(newValue) } }) }) } compile(dom) { dom.childNodes.forEach(child => { // nodeType 为3时为文本节点，匹配有{{}}的节点 if(child.nodeType === 3 && /\{\{(.*)\}\}/.test(child.textContent)) { let key = RegExp.$1.trim() // 1. 第一次遍历时会把该节点放到Dep依赖里面去 Dep.target = child // 2. 将{{key}} 替换成data中对应的值，这里会触发getter child.textContent = child.textContent.replace(`{{${key}}}`, this.options.data[key]) Dep.target = null } // 递归遍历子节点 if(child.childNodes.length) { this.compile(child) } }) } } // dep对象存储所有的观察者 class Dep { constructor() { this.watcherList = [] } // 添加watcher add(node) { this.watcherList.push(node) } // 更新watcher update(value) { // 6. 更新节点中的值 this.watcherList.forEach(node => { node.textContent= value }) } } </script> </body> </html>

评论收藏

内容反馈

版权申诉