Vue 的响应式原理

数据发生改变，界面跟着更新，如图所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{message}}{{message}}{{message}}</div><script src="../Vue源码/vue-2.6.14/dist/vue.js"></script><script>const app = new Vue({el:'#app',data(){return{message:'哈哈哈'}}})</script>
</body>
</html>

这就是 vue 的响应式，那么 vue 内部是如何实现的呢？

1.app.message 修改数据，Vue 内部是如何监听 message 数据发生改变的？

vue 内部是通过 Object.defineProperty 监听对象属性的改变

2.当数据发生改变时，Vue 是如何通知哪些地方刷新界面的？

通过发布订阅者模式来通知哪些页面需要进行刷新

    <script>const obj = {// 首先拿到数据对象message:'哈哈哈',name:'why'}Object.keys(obj).forEach(key => {// 然后遍历对象，拿到里面的每一个 key 和 值let value = obj[key]//重新定义 obj，增加了两个方法 set 和 get Object.defineProperty(obj, key, {set(newValue){//值发生改变时执行该函数，获取新值console.log('监听' + key +'改变')//哪里使用就通知哪里，如何确定哪里进行了使用呢？-----解析html获取哪里进行了使用（发布订阅者模式）value = newValuedep.notify()// 订阅者发生改变},get(){//监听对应的值console.log('获取'+ key + '对应的值')return value}})})//发布者订阅者模式//1.发布者class Dep {constructor(){// new Dep() 的时候调用 constructorthis.subs = []}addSub(watcher){//把订阅者添加进来this.subs.push(watcher)}notify(){//用来通知订阅者发生改变this.subs.forEach(item =>{item.update()})}}//2.订阅者class Watcher{constructor(name){this.name = name}update(){//在这里更新界面console.log(this.name + '发生update')}}const dep = new Dep()const w1 = new Watcher('item1')dep.addSub(w1)const w2 = new Watcher('item2')dep.addSub(w2)const w3 = new Watcher('item3')dep.addSub(w3)</script>

vue 的响应式原理如图：

Vue 的响应式原理相关推荐

Vue.js响应式原理
Vue.js响应式原理框架浏览数:659 2017-9-20 关于Vue.js Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图.Vue.js的响应式原理依赖于 ...
vue 获取响应头里set-cookie的值_最简化 VUE的响应式原理
前言前端目前两个当家花旦框架 VUE React,它们能够流行开来,响应式原理做出了巨大贡献.毕竟,它通过数据的变更就能够更新相应的视图,极大的将我们从繁琐的DOM操作中解放出来. 所以掌握它们的响 ...
Vue.js 响应式原理
文章目录 Vue 数据响应式原理 `Object.defineProperty()` 数据响应式原理 `Proxy` 相关设计模式观察者模式发布-订阅模式 Vue 响应式原理模拟 Vue 类 Ob ...
彻底理解Vue数据响应式原理
彻底理解Vue数据响应式原理当创建了一个实例后,通过将数据传入实例的data属性中,会将数据进行劫持,实现响应式,也就是说当这些数据发生变化时,对应的视图也会发生改变. const data = { ...
深入了解Vue 2响应式原理，并手写一个简单的Vue
1. Vue 2的响应式原理 Vue.js 一个核心思想是数据驱动.所谓数据驱动是指视图是由数据驱动生成的,对视图的修改,不会直接操作 DOM,而是通过修改数据.vue.js里面只需要改变数据,Vue ...
通过Proxy和Reflect实现vue的响应式原理
vue3通过Proxy+Reflect实现响应式,vue2通过defineProperty来实现 Proxy Proxy是什么 Proxy是ES6中增加的类,表示代理. 如果我们想要监听对象的操作过程 ...
vue.js响应式原理解析与实现
从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新 ...
Vue源码解读一：Vue数据响应式原理
这方面的文章很多,但是我感觉很多写的比较抽象,本文会通过举例更详细的解释.(此文面向的Vue新手们,如果你是个大牛,看到这篇文章就可以点个赞,关掉页面了.)通过阅读这篇文章,你将了解到: 1.Vue数 ...
不要再搞混Vue的响应式原理和双向数据绑定了
前言之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是Vue,所以免不了问到其响应式原理和Vue的双向数据绑定.但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数 ...

Vue 的响应式原理

Vue 的响应式原理相关推荐

最新文章

热门文章