vue中的响应式是什么? 怎么理解响应式原理? |
您所在的位置:网站首页 › 动态数据是什么意思 › 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 是 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)我们用这个方法来模拟vue底层的源码 通过按钮修改dom里面的数字: 2 change 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先来看一个小例子: {{user}} changeName new Vue({ el:'#app', data:{ user:{ age:15 } }, methods: { changeName(){ this.user.name = '韩梅梅' console.log(this.user) } }, })这时候我按钮,发现改变不了name的值,所以打开控制看一下 解决方式:动态的往里面添加数据,使用this.$set方法 以上面例子为例: methods: { changeName(){ // this.user.name = '韩梅梅' // set 将数据用 object.defainPropty进行处理 添加getter和setter this.$set(this.user,'name','韩梅梅') console.log(this.user) } }这样我们就能在页面上看到新增的属性 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |