Vue深入响应式原理 数据传输及其
2019-04-20 08:55
489 查看
1. vue深入响应式原理
深入响应式原理:
- 当视图模型(VM)中的数据模型(M)发生改变时, 视图(V)就会进行更新
- Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生
改变的时候, 就会触发, 然后wather就会触发, 告诉视图(V)进行重新渲染 - **** 数据必须放在data选项中才能进行深入响应式
底层原理:
核心使用的是es5的一个方法,这个方法不支持ie8以及以下
Object.defineProperty(obj,obj.attr,descriptor) 参数: obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。它是一个对象, 这个对象有哪些构成? configurable: 决定了对象的key是否可删除 enumerable: 决定了对象是否可遍历(枚举) writeable: 决定了对象的key的value是否可修改 存储器: get函数 ----起了个名字getter 设置当前对象的key的初始值 set函数 ----起了个名字setter 修改当前对象的key的值
数据模型–》 vm中 的data选项
状态管理
什么叫做状态?什么叫做状态管理?
我们使用一个数据去管理视图中的一个部分, 那么这条数据就叫做状态, 这种管理模式就叫做状态管理
总结:
- 什么是深入响应式原理?(总结)(特别重要)
深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候, 视图就会响应的进行更新, 那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的
名称解释:
数据劫持: Object.defineProperty中的getter/setter , 然后在执行watcher
订阅发布:事件(自定义事件)
订阅: 事件的声明 vm.on发布:事件的触发vm.on 发布: 事件的触发 vm.on发布:事件的触发vm.emit
非响应式情况
在vm模型的data外定义的属性, 就是非响应式属性, 非响应式属性, 属性值更新, 视图不会更新
非响应属性合并到响应式属性上的方法解决: 将非响应式属性合并到响应式属性身上 --》 Vue.set(vm.someObj,prop,value) this.$set(vm.someObj,prop,value)非响应式属性如何变成响应式属性
思维: 将非响应式属性合并到响应式属性身上
解决: 利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)
Object.assign(目标对象,对象1, 对象2,对象3)
2. vue双向数据绑定原理
v-mode 双向数据绑定 1. 效果 数据改 , 视图更 视图改, 数据更 2. 实现 使用v-model实现 3. 缺点 v-model默认绑定value属性, 所以v-model只能在表单使用 4. 原理 1. 为什么数据能直接在视图显示 v-model默认绑定了DOM对象的value属性, 当它初次绑定的时候, 就会触发getter,watcher就会触发, watcher通知Vue生成新的VDOM树, 再通过render函数进行渲染,生成真实DOM 2. 为什么视图修改数据就会修改 当视图修改是, 意味着DOM的value属性值改变,就会触发setter,watcher监听机制就会执行 watcher通知Vue生成新的VDOM树,再通过render函数进行渲染,生成真实DOM
3. axios fetch 数据请求
axios
//1. 验证axios返回的结果是不是一个Promise对象 ---> 是 返回一个Promise对象 //2. axios写法一 /* axios.get('http://localhost:8080/get.php',{ method: 'get', params: { a: 1, b: 2 } }) .then( res => { console.log( res ) }) .catch( error => { if( error ){ throw error } }) */
post方法
axios({ url: 'http://localhost/post.php', method: 'post', data: params, headers: { 'Content-Type': "application/x-www-form-urlencoded" } }) .then(res => { console.log( res ) }) .catch( error => { if( error ){ throw error } })
post踩坑之路
post踩坑之路解决 1. 统一设置请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 2. 使用 URLSearchParams 实例化一个params对象 3. 使用params对象的append方法添加数据
fetch
eg:
get() { /* 输出结果是promise console.log(fetch('http://localhost/get.php?a=1&b=2',{ method: 'get' })) */ /* fetch('http://localhost/get.php?a=1&b=2') .then(res=> res.text()) // 数据格式化 res.json() res.blob() .then(data => { console.log( data ) }) .catch(error => { if( error ){ throw error } }) */ fetch('./data.json') .then(res => { res.json() //res.text() res.blob() }) .then(data => console.log(data)) .catch(error => console.log(error)) }, post() { fetch('http://localhost/post.php', { method: 'post', headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交 }), body: new URLSearchParams([ ["a", 1], ["b", 2] ]).toString() }) .then(res => res.text()) .then(data => console.log(data)) .catch(error => { if (error) { throw error } }) }
4. watch 监听
watch 1. 作用: 用来监听数据的变换, 当数据模型 (data选项 M)发生改变时, watch就会触发 2. 使用 两种用法: 1. key的value值是一个函数 普通玩家 ```javascript new Vue({ watch: { key(value,oldvalue){} } })
- key的value值是一个对象 主播/职业玩家
new Vue({ watch: { key: { deep: true/false 深入监听, handler(value,oldvalue){} // 监听的处理函数 } } }) watch中的key指的就是data选项中key
watch vs computed
目的: 对比 watch vs computed vs methods
methods: 事件
computed:
- 有逻辑 2. 要像变量一样使用 , 这个时候选computed
watch: - 有异步操作 2. 开销较大
5. mixins
6. 虚拟DOM和diff算法
7. 列表渲染中的key的作用
相关文章推荐
- vue初识及数据驱动/ 双向数据绑定的原理 / 深入响应式的原理
- 模拟源码深入理解Vue数据驱动原理(2)
- Vue响应式原理深入解析及注意事项
- Vue实现双向绑定的原理以及响应式数据的方法
- vue 深入响应式原理 注意事项
- Vue渲染原理及其双向数据绑定详解
- vue 深入响应式原理
- 深入了解mysql数据传输编码原理
- 浅谈Vue 数据响应式原理
- Vue 源码解析:深入响应式原理
- Vue.2.0.5-深入响应式原理
- 模拟源码深入理解Vue数据驱动原理(1)
- vue深入响应式原理
- Vue实现双向绑定的原理以及响应式数据
- vue.js中响应式原理和双向数据绑定原理
- Vue实现双向绑定的原理以及响应式数据
- vue笔记-----深入响应式原理
- Java Thread&Concurrency(14): 深入理解条件队列(Condition)及其实现原理
- vue数据双向绑定原理
- Vue.js学习 Item12 – 内部响应式原理探究