vue中响应式是什么？怎么理解响应式原理?

vue中响应式是什么？
概念：
官网解释：Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。

简而言之就是数据变页面变

实现原理：
Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被解除过后的数据会有两个属性：一个叫getter，一个叫setter。

getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher监听，通知dom修改刷新。

举个例子：
我们新创建一个对象data，并在控制台输出

let data={name:1}
console.log(data)

我们看到的结果是这样的

接着我们用Object.defineProperty处理一下数据，比如创建一个成员

let data={name:1}Object.defineProperty(data,'age',{// getterget(){},// setterset(){}
})console.log(data)

再来看，这时多了两个方法

这就是Object.definepropty的作用，是es5中的一个方法，处理数据，给数据赋予getter和setter。

Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

正常情况下，这两个方法都不会触发，当我们给age赋值和改变age值的情况下会执行这两个函数

let middle = 6
Object.defineProperty(data,'age',{get(){console.log('获取age')return middle},set(parmas){//参数就是赋值的数据console.log('修改age数据',parmas)middle = parmas}
})
console.log(data)
// 取值的时候触发getter
console.log(data.age)
//赋值的时候触发setter
data.age = 15
console.log(data.age)

difinePropty模拟响应式：
我们用这个方法来模拟vue底层的源码

通过按钮修改dom里面的数字：

<div id ='test'>2
</div>
<button onclick="change()">change</button>
<script>
let data={}function change(){data.age =999
}// 模拟vue中的源码
let middle = 2
Object.defineProperty(data,'age',{get(){return middle},set(params){middle=params// 只要是数据修改了就会指令watcher()}
})// 绑定watcher监听
function watcher(){// 数据改变之后触发 进行diff【判断是否应该修改dom renderDom()
}// 重新渲染的方法
function  renderDom(h) {let test = document.getElementById('test')let age = data.age test.innerHTML = age
}
console.log(data)

Vue中数据变页面一定变嘛？

那么问题来了，数据变页面一定变么？
不一定，数据变页面变的原因是因为数据劫持了data

先来看一个小例子：

<div id ='app'>{{user}}<hr>  <button @click='changeName'>changeName</button>
</div><script>
new Vue({el:'#app',data:{user:{age:15}},methods: {changeName(){this.user.name = '韩梅梅'console.log(this.user)}},
})
</script>

这时候我按钮，发现改变不了name的值，所以打开控制看一下

我们会发现只有age有getter和setter，name没有，Vue 无法检测到对象属性的添加或删除，所以没法进行响应式改变数据

TIPS：两种情况新添加的属性都有没有getter和setter，数据变页面也不变：1. 对象数据的添加 2. 数组长度的改变
解决方式：动态的往里面添加数据，使用this.$set方法

以上面例子为例：

methods: {changeName(){// this.user.name = '韩梅梅'// set 将数据用 object.defainPropty进行处理 添加getter和setterthis.$set(this.user,'name','韩梅梅')console.log(this.user)}}

这样我们就能在页面上看到新增的属性

vue中响应式是什么？怎么理解响应式原理?相关推荐

vue中对token的有效期的理解
vue中对token的有效期的理解保持登录是每个web页面必须要做的,不能一直不停的让用户进行登录,也不能让用户不登录就直接进入页面.token在保持登录中起到了非常重要的作用,我之前写过一篇博客, ...
深究vue中computed顺序、watch顺序、响应次数
文章目录前言深究步骤 1.代码 2.输出结果 3.分析过程总结前言深究vue中computed顺序.watch顺序.响应次数深究步骤 1.代码 <template><di ...
Vue中 $attrs、$listeners使用和理解
前言提示:Vue中常见的组件通信方式可分为三类: 父子通信通常父子传值都是通过prpos,子组件通过events接收通过父链/子链通信($parent/$chldren); ref也可以访 ...
Vue 中v-model的完整用法（v-model的实现原理）
目录一. v-model的基本使用二. v-model的原理三. v-model结合radio类型使用 4. v-model结合复选框类型使用单选多选值的绑定 5. v-model结合se ...
Vue中data和computed的区别
First data 和 computed都是响应式的,先看看官方的说法: Data: Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data ...
vue中的v-model原理，与组件自定义v-model
VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" ...
面试官：Vue中组件和插件有什么区别？
一.组件是什么回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度 ...
vue中App.vue的主要作用
app.vue中不但可以当做是网站首页,也可以写所有页面中公共需要的动画或者样式.不在上面写代码也可以. app.vue是主组件,是页面入口文件,是vue页面资源的首加载项.所有的页面都是在app.v ...
如何优雅的在 vue 中使用非响应式对象_一篇文章上手Vue3中新增的API
1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...

vue中响应式是什么？怎么理解响应式原理?

vue中响应式是什么？怎么理解响应式原理?相关推荐

最新文章

热门文章