Vue深入响应式理解、v-mode 双向数据绑定、watch、axios、fetch数据请求、mixins/global、:key
1.Vue深入响应式原理
1. vue深入响应式原理
数据模型–》 vm中 的data选项
状态管理
什么叫做状态？什么叫做状态管理？
我们使用一个数据去管理视图中的一个部分， 那么这条数据就叫做状态， 这种管理模式就叫做状态管理
总结：
1. 什么是深入响应式原理？王者级的
深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候， 视图就会响应的进行更新， 那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的
名称解释：
数据劫持： Object.defineProperty中的getter/setter ， 然后在执行watcher
订阅发布：事件（自定义事件）
订阅： 事件的声明 vm. o n 发 布 ： 事 件 的 触 发 v m . on 发布： 事件的触发 vm. on发布：事件的触发vm.emit
2. 非响应式情况
在vm模型的data外定义的属性， 就是非响应式属性， 非响应式属性， 属性值更新， 视图不会更新
3. 非响应式属性如何变成响应式属性
思维： 将非响应式属性合并到响应式属性身上
解决： 利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)
4. Vue.set底层原生是什么？
Object.assign(目标对象，对象1， 对象2，对象3)
2.v-mode 双向数据绑定
1. 效果
数据改 ， 视图更
视图改， 数据更
2. 实现
使用v-model实现
3. 缺点
v-model默认绑定value属性， 所以v-model只能在表单使用
4. 原理
- 为什么数据能直接在视图显示
v-model默认绑定了DOM对象的value属性， 当它初次绑定的时候，
就会触发getter,watcher就会触发， watcher通知Vue生成新的VDOM树，
再通过render函数进行渲染,生成真实DOM - 为什么视图修改数据就会修改
当视图修改是， 意味着DOM的value属性值改变，就会触发setter,watcher监听机制就会执行
watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM
3.watch
1. 作用：
用来监听数据的变换， 当数据模型 （data选项 M）发生改变时， watch就会触发
2. 使用
两种用法：
- key的value值是一个函数 普通玩家
new Vue({
watch: {
key(value,oldvalue){}
}
})
- key的value值是一个对象 主播/职业玩家
new Vue({
watch: {
key： {
deep: true/false 深入监听,
handler(value,oldvalue){} // 监听的处理函数
}
}
})
watch中的key指的就是data选项中key
4.axios、fetch数据请求
1.axios get
methods:{
axiosGet(){
axios({
method: 'get',
url:'http://127.0.0.1:8080/lx4.19data/get-data.php',
params:{
a:1,
b:2
}
}).then((res)=>{
console.log(res)
})
}
2.axios post
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; post请求需要设置请求头
let params=new URLSearchParams();
params.append('a',1);
params.append('b',5)
axiosPost(){
axios({
method:'post',
url:'http://127.0.0.1:8080/lx4.19data/post-data.php',
data:params,
//
headers: {
'Content-Type': "application/x-www-form-urlencoded"
} //头部写在里面也可以
}).then((res)=>{
console.log(res)
})
}
3.fetch get
methods:{
fetchGet(){
fetch('http://127.0.0.1:8080/lx4.19data/get-data.php?a=3&b=5') //fetch的参数写在url里面
.then(res => res.text()) //注意！要写格式转换！
.then(data => console.log(data))
.catch((err)=>{
if(err){
throw err;
}
})
}
}
4.fetch post
fetch('http://127.0.0.1:8080/lx4.19data/post-data.php',{
method:'post',
headers:new Headers({
'content-type':'application/x-www-form-urlencoded'
}),注意post方法需要设置请求头
body:new URLSearchParams([['a',1],['b',8]]).toString()
})
.then(res=>res.text())
.then(data=>console.log(data))
.catch((err)=>{
if(err){
throw err
}
})
5.mixins
<body>
<div id="app">
<button @click = "sum"> 点击 </button>
<button @click = "redecer"> 点击 </button>
</div>
</body>
<script>
var mixin = {
methods: {
sum(){
alert( 10*10 )
}
},
}
new Vue({
el: '#app',
data: {},
watch: {},
mixins: [mixin],
methods: {
redecer(){
alert( 100-10 )
},
sum(){
alert('1111')
}
},
computed: {}
})
</script>
6.global
Vue.mixin({
methods: {
changeName(){
alert('zhangjun')
}
}
})
7.key的作用
<li v-for = " (item,index) in list " :key = "item.id">
<p> {{item.name}} </p>
<button @click = "remove(index)"> 删除 </button>
<button @click = "changeStyle"> 修改样式 </button>
为了防止删除数据index时，剩余的值index自动发生改变，所以使用唯一的key -> id :key=“item.id”