2. 技术博客
  3. vue渐进式框架-响应式原理及生命周期

vue渐进式框架-响应式原理及生命周期

tech2022-08-06  161

vue响应式原理与生命周期

文章目录

vue响应式原理与生命周期前言一、vue响应式原理二、生命周期

前言

提示：读完以下的内容，你将可以回答如下问题：响应式原理：如何修改声明式变量？当声明变量发生变化时，在哪个时间节点去更新DOM？如何理解生命周期？

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue响应式原理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id='app'> <input id='ipt' type="text"> <h1 id='user'></h1> </div> <script> // Data getter/setter 劫持 var app = {} var username = 'zhangsan' Object.defineProperty(app, 'username', { get: function() { return username }, set: function(newVal) { username = newVal // 通知watcher，让它去更新真实的DOM Watcher(newVal) } }) // Watcher，它唯一的作用是更新DOM function Watcher(newVal) { document.getElementById('user').innerText = newVal document.getElementById('ipt').value = newVal } // 页面初始化，使用watcher把响应式数据渲染到界面，并给相关的元素绑定js事件 Watcher(app.username) // 页面中的表单事件 // .lazy 当表单失焦时，再更新app声明式变量 // document.getElementById('ipt').addEventListener('blur', function(e){ // app.username = e.target.value // }) // 不加.lazy的效果，只有表单变化，就更新声明变量 document.getElementById('ipt').addEventListener('keyup', function(e){ app.username = e.target.value }) </script> </body> </html>

Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响，Vue中编写了一个wather来处理数据，在使用getter方法时，就会通知wather，让它去更新真实的DOM 同样的，在使用setter方法时，就会在变更值的同时，通知wather，让它去更新真实的DOM

二、生命周期

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>生命周期</title> </head> <body> <div id='app' class='app'> <h1>测试生命周期</h1> <h1 v-text='count'></h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', // 挂载 data: { count: 1, timer: null }, // 第一阶段，实例化阶段，vue实例创建过程 // 响应式原理就在这里实现的 beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, // 第二阶段，挂载阶段，把vue实例和真实的DOM关联起来 // vue创建虚拟DOM、用声明式变量替换虚拟DOM中各种指令，转换成真实DOM渲染到界面中 beforeMount(){ console.log('beforeMount') }, mounted() { console.log('mounted') // 在这里调后端接口、开启定时器、开启websocket长连接 this.timer = setInterval(function(){ console.log('1') }, 1000) }, // 第三阶段，更新阶段，当声明式变量发生变化时触发 // 什么是虚拟DOM？虚拟DOM是在挂载阶段创建的一个json变量 // 虚拟DOM本质就是一个json对象，它是存储在当前硬件的内存中一个变量 // 虚拟DOM就是用来描述真实DOM // 当声明式变量发生变化时，就自动生成一个新的虚拟DOM // vue使用diff运算，对两个虚拟DOM进行差异化对象，找到最小的差异 // 最后通过watcher把这个最小的差异更新到真实的DOM中去，页面进而自动更新 // 虚拟DOM存在的意义，就是最小化地减少DOM操作，因为DOM操作最耗费性能的 beforeUpdate() { console.log('beforeUpdate') }, updated() { console.log('updated') }, // 第四阶段，销毁阶段 // 把watcher拆卸掉，把当前组件及其子组件中事件绑定都解绑 beforeDestroy() { console.log('beforeDestroy') // 清除定时器、清除长连接，清除一切耗费性能的业务 clearInterval(this.timer) }, destroyed() { console.log('destroyed') } }) </script> </body> </html> //M V VM 网页=视图+数据 //M 是数据、模型，常常来自于后端 //V 是视图，就是页面结构（DOM树） //VM 是视图模型（Virtual DOM），它就是虚拟DOM，它就是data选项 var vm = { tagName: 'div', props: { id: 'app', class: 'app' }, children: [ { tagName: 'h1', children: '测试生命周期' }, { tagName: 'h1', children: '1' } ] } var vm2 = { tagName: 'div', props: { id: 'app', class: 'app' }, children: [ { tagName: 'h1', children: '测试生命周期' }, { tagName: 'h1', children: '2' } ] } diff(vm, vm2)
最新回复(0)