vue深入响应式原理及双向绑定原理
1. vue深入响应式原理
深入响应式原理:- 当视图模型(VM)中的数据模型(M)发生改变时, 视图(V)就会进行更新
- Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生
改变的时候, 就会触发, 然后wather就会触发, 告诉视图(V)进行重新渲染 - 数据必须放在data选项中才能进行响应式
4.数据模型–》 vm中 的data选项
状态管理
什么叫做状态?什么叫做状态管理?
我们使用一个数据去管理视图中的一个部分, 那么这条数据就叫做状态, 这种管理模式就叫做状态管理
底层原理:
核心使用的是es5的一个方法,这个方法不支持ie8以及以下
Object.defineProperty(obj,obj.attr,descriptor)
参数:
1.obj
要在其上定义属性的对象。
2.prop
要定义或修改的属性的名称。
3.descriptor
将被定义或修改的属性描述符。它是一个对象, 这个对象有哪些构成?
-
configurable: 决定了对象的key是否可删除
-
enumerable: 决定了对象是否可遍历(枚举)
-
writeable: 决定了对象的key的value是否可修改
-
存储器:
get函数 ----起了个名字getter 设置当前对象的key的初始值
set函数 ----起了个名字setter 修改当前对象的key的值
思考:
如果数据没有放在data中该怎么使它成为响应式
例:
vm.num = 1000 //非响应式的
解决:
将非响应式属性合并到响应式属性身上
例
Vue.set(vm.list,'num',1000)//使用set方法
Vue.set(vm.someObj,prop,value) this.$set(vm.someObj,prop,value)
思考
将一个对象(key , value)合并另一个对象身上
解决
对象的合并: Object.assign(目标对象, 当前对象)
总结以上: 1. 什么是深入响应式原理?深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候, 视图就会响应的进行更新, 那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的
名称解释:
数据劫持: Object.defineProperty中的getter/setter , 然后在执行watcher
订阅发布:事件(自定义事件)
订阅: 事件的声明 vm.on发布:事件的触发vm.on
发布: 事件的触发 vm.on发布:事件的触发vm.emit
在vm模型的data外定义的属性, 就是非响应式属性, 非响应式属性, 属性值更新, 视图不会更新
3. 非响应式属性如何变成响应式属性思维: 将非响应式属性合并到响应式属性身上
解决: 利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)
Object.assign(目标对象,对象1, 对象2,对象3)
2. vue双向数据绑定原理
- 效果
数据改变 , 视图更改
视图改变, 数据更改 - 实现
使用v-model实现 - 缺点
v-model默认绑定value属性, 所以v-model只能在表单使用 - 原理
为什么数据能直接在视图显示
v-model默认绑定了DOM对象的value属性, 当它初次绑定的时候,
就会触发getter,watcher就会触发, watcher通知Vue生成新的VDOM树,
再通过render函数进行渲染,生成真实DOM - 为什么视图修改数据就会修改
当视图修改时, 意味着DOM的value属性值改变,就会触发setter,watcher监听机制就会执行
watcher通知Vue生成新的VDOM树,再通过render函数进行渲染,生成真实DOM
5.watch
- 作用:
用来监听数据的变换, 当数据模型 (data选项 M)发生改变时, watch就会触发 - 使用
两种用法: key的value值是一个函数 普通监听
new Vue({ watch: { key(value,oldvalue){} } })
2. key的value值是一个对象 深入监听
new Vue({ watch: { key: { deep: true/false 深入监听, handler(value,oldvalue){} // 监听的处理函数 } } })
watch中的key指的就是data选项中key
例题:写好姓和名,全称自动显示
第一种方式,使用的watch监听
<div id="app"> <div> 姓: <input type="text" v-model = "firstName"> </div> <div> 名: <input type="text" v-model = "lastName"> </div> <div> 全称; <input type="text" v-model = "fullName"> </div> </div> </body> <script> new Vue({ el: '#app', data: { firstName: '', lastName: '', fullName: '' }, watch: { firstName(val){ this.fullName = val + this.lastName }, lastName(val){ this.fullName = this.firstName + val }, fullName(val){ console.log( val ) this.firstName = val.slice(0,1) this.lastName = val.slice(1) } } })
第二种方式,使用计算属性computed
<div id="app"> <div> 姓: <input type="text" v-model = "firstName"> </div> <div> 名: <input type="text" v-model = "lastName"> </div> <div> 全称 <input type="text" v-model = "fullName"> </div> </div> </body> <script> new Vue({ el: '#app', data: { firstName: '', lastName: '', }, computed: { fullName(){ return this.firstName + this.lastName } } }) </script>
- vue初识及数据驱动/ 双向数据绑定的原理 / 深入响应式的原理
- Vue实现双向绑定的原理以及响应式数据
- Vue实现双向绑定的原理以及响应式数据的方法
- Vue实现双向绑定的原理以及响应式数据
- 深入理解vue.js双向绑定的实现原理
- 深入理解vue.js双向绑定的实现原理
- vue.js中响应式原理和双向数据绑定原理
- Vue双向数据绑定原理分析
- 浅析VUE双向绑定原理,实现数据监听并通知订阅者
- 梳理vue双向绑定的实现原理
- vue的双向数据绑定原理
- 【学习笔记】Vue中实现双向数据绑定的原理
- 【vue】vue数据双向绑定实现原理
- 简简单单的Vue1(MVVM与Vue的双向绑定原理)
- 浅谈vue,angular,react数据双向绑定原理分析
- vue双向绑定的原理及实现双向绑定MVVM源码分析
- vue双向绑定的原理
- vue数据双向绑定原理
- Vue数据双向绑定原理及简单实现方法
- Vue 双向绑定原理