Vue深入响应式原理
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. o n 发 布 ： 事 件 的 触 发 v m . 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)
Vue.set底层原生是什么？
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. 开销较大