虚拟DOM 与 axios fetch请求

最新推荐文章于 2024-06-23 07:14:05 发布

nanwanLisa

最新推荐文章于 2024-06-23 07:14:05 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/nanwanLisa/article/details/97749313

版权

虚拟DOM

Vue的核心是双向绑定和虚拟DOM

1.什么虚拟dom
- 1所谓的virtual dom 也就是虚拟节点。它通过js的object对象模拟dom中的节点，然后通过特定的render方法将其渲染成真实的dom节点都没diff则是通过js层面的计算，返回一个patch对象，即补丁对象，通过特定的操作解析patch对象，完成页面的重新渲染，

如图所示：

VDOM的渲染流程

diff算法

1.diff算法来源于后端它的作用是比较两个文件，然后将两个文件的不同之处挑选出来
2.将挑选出来的内容，形成补丁对象
3.diff算法的优点和缺点：
- 最终表现在DOM上的修改只是部分的变更，可以保证搞笑的渲染，提高网页的性能
- 首次渲染大量的DOM时，由于多了一层虚拟DOM的计算，会比innerHtml慢一点
render方法【渲染函数】

1.将vdom渲染为真实的dom
2.在javascript中可以通过json xml text 写dom结构
3.render 通过 javascript + xml 结合生成了一种新的语法糖： JSX
4.将jsx转换成vdom对象模型
5.渲染页面【真实的dom】


// 1. 获取数据
var model = {
msg: 'hello '
}


// 2. 创建 VDOM
var vdom = {
tag: 'DIV',
attr: {
className: 'box'
},
children: [
{
tag: 'UL',
attr: {},
children: [
{
tag: 'li',
attr: {},
content: model.msg
}
]
}
]
}


//3. 渲染dom 【 render 】
var box = document.createElement('DIV')
var ul = document.createElement('UL')
var li = document.createElement('LI')
box.className = vdom.attr.className
li.innerHTML = vdom.children[0].children[0].content
ul.appendChild(li)
box.appendChild(ul)
document.body.appendChild( box )


// 4. 数据改变

model.msg = "hello 1905"


// 5. 重新生产vdom [ render ]

vdom = {
tag: 'DIV',
attr: {
className: 'box'
},
children: [
{
tag: 'UL',
attr: {},
children: [
{
tag: 'li',
attr: {},
content: model.msg
}
]
}
]
}


// 6. 通过diff算法进行两个vdom的比较，将不同之处挑选出来，形成一个patch对象【 补丁对象 】，再去重新渲染页面

key
1.作用：给vdom打标记，实现同层级比较
2.列表渲染都要加上key，key一定要是唯一的标识，最好用id


<body>
<div id="app">
<ul>
<li
v-for = "(item,index) in todos"
:key = "item.id"
>
<p> {{ item.task }} </p>
<div class="btn_box">
<button @click = "modify"> 修改 </button>
<button @click = "remove( index )"> 删除 </button>
</div>
</li>
</ul>
</div>
</body>


<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello ',
todos: [
{
id: 1,
task: '任务一'
},
{
id: 2,
task: '任务二'
}
]
},
methods: {
remove ( index ) {
this.todos.splice( index,1 )
},
modify ( e ) {
// 点击修改让整个li的背景颜色为红色
// 以下代码我是用来说明key的作用的，你在真实项目中不允许使用， 因为接下来我要操作dom了
const li = e.target.parentNode.parentNode
li.style.background = 'red'
}
}
})
</script>

前端得数据请求

1.原生：

ajax
fetch

2.封装：
- jq
- vue 1.x vue-resource 弃用了
- axios 【如今最好的封装请求库】

axios 请求

1.axios底层封装是Promise。
2.请求方式有动态请求和静态请求
3.使用方法：


 1.axios.get()
2.axios.post()
axios({ })

1.静态请求 getJson 模拟的数据


<button type="button" class="btn btn-primary" @click="getJson"> getJson</button>



methods: {
getJson() {
// 获取静态数据
//先验证底层是不是promise
// console.log(axios({}))//输出Promise {<pending>}
// 用法有三种：
// 1.axios.get()
// 2.axios.post()
axios({ //3.
url: './mock/data/move.json',
metheds: 'GET',
}).then(res => console.log(res))
.catch(error => console.log(error))
},

}

2.动态请求：

get：


<button type="button" class="btn btn-primary" @click="get"> get</button>
<button type="button" class="btn btn-primary" @click="post"> post</button>

get写法


get() {
// axios
// .get('http://localhost:8080/get.php', {
// params: {
// a: 1,
// b: 2
// }
// })
// .then(res => console.log(res))
// .catch(error => console.log(error))
axios({
url: 'http://localhost:8080/get.php',
methed: 'GET',
params: {
a: 1,
b: 2
}
}).then(res => console.log(res))
.catch(error => console.log(error))
},

post写法


<script>
// 引入axios cdn之后 我们回得到一个axios全局变量
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 统一设置post请求头


post() {
// axios.post('http://localhost:8080/post.php', {
// a: 1,
// b: 2
// }).then(res => console.log(res))
// .catch(error => console.log(error))
const params = new URLSearchParams()
params.append('a', 1)
params.append('b', 2)
axios({
method: 'POST',
url: 'http://localhost:8080/post.php',
// params: {
// a: 1,
// b: 2
// }
data: params
}).then(res => console.log(res))
.catch(error => console.log(error))
// 设置请求头
// 通过 const params = new URLSearchParams()
// params.append('a', 1)
// params.append('b', 2)
// 传递参数
}

</script>

**在使用post请求的时候
需要先统一设置请求头然后通过 const params = new URLSearchParams()
params.append(‘a’, 1)
params.append(‘b’, 2)
传递参数
**

fetch 请求

fetch是原生js提供的
1.我们可以像全局变量一样使用
2.fetch也是promise
3.原生fetch返回的结果是没有进行封装的，是直接暴露的
4.fetch数据格式化的方式有：

json()
text()
blob()格式化二进制【视频图像音频】

fetch的post请求需要先设置请求头，然后通过 new URLSearchParams来进行传参

post请求：


post() {
// 使用post请求请求动态数据
fetch('http://localhost:8080/post.php', {
method: 'POST', // or 'PUT'
body: new URLSearchParams([
['a', 1],
['b', 2]
]).toString(),
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
})
}).then(res => res.text())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}

**get请求 **


get() {
// 使用fetch使用动态数据
fetch('http://localhost:8080/get.php?a=1&b=2')
.then(res => res.text()) //第一个then是用来数据格式化的
.then(data => console.log(data)) //第二个then才是格式化之后的结果
.catch(error => console.log(error)) //第三个是错误捕获
},


getstatic() {
// 使用fetch请求mock数据
// console.log(fetch('./mock/data/data.json'))
fetch('./mock/data/data.json')
.then(res => res.json()) //第一个then是用来数据格式化的
.then(data => console.log(data)) //第二个then才是格式化之后的结果
.catch(error => console.log(error)) //第三个是错误捕获
},

第一个then：是用来数据格式化的
第二个then：是格式化之后的结果
catch：是错误捕获

模拟数据实现的方式

1.mock.js生成：http://mockjs.com/


// 使用 Mock
var Mock = require('mockjs')


var data = Mock.mock({

'list|3': [{
// 3 固定了输出三个
'id|+1': 1,
'name|1': ['lisa', 'huahua', 'xuanya']
}]
})

console.log(JSON.stringify(data, null, 4))

// 我们输出的结果应该是一个json文件，所以我们要把输出的数据放入到一个文件里面·
// 需要文件 引 FS
fs.writeFile('./data/data.json', JSON.stringify(data, null, 4), (err) => {
if (err) throw err
}) // 这样就生成了一个json文件了
// 在工作中 想要别的 类型的数据 在官网中找示例然后对应的去修改 http://mockjs.com/examples.html

2.拷贝线上相近的json
- 浏览器开发者工具
netWork / XHR / copy response

3.easy mock :https://easy-mock.com/login

深入响应式原理

【数据驱动原理/ 双向数据绑定原理】

1.深入响应式原理

数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新
vue的底层是通过数据劫持和订阅发布来进行处理的，当我们用v-model指令绑定input的value值的时默认会触发object.defineProperty里面的get方法会赋值一次初始值
当我们修改的视图内容的时候 set里面的val会改变，val改变dom的属性就随之变化了属性变了会触发set 触发了set我们会获得一个新的val值vue通过observe观察者观察到数据改变了，会重新生成dom重新生成页面

2.数据驱动原理
数据改变视图改变，
vue是通过数据劫持和订阅发布来进行深入响应的，
数据劫持指的是： vue通过es5的Object.defineProperty属性对data选项中的数据进行getter和setter设置
订阅发布指的是：vue通过自定义事件的形式，将data的变化反映到视图上去vue通过observe观察者对象反映数据的变化，然后通知vue生成新的Virtual DOM 进而渲染视图

3.双向数据绑定原理
我们使用v-model这个指令来实现双向数据绑定，数据改变视图改变，视图改变数据也随之改变
vue是通过数据劫持和订阅发布来进行深入响应的，
数据劫持指的是： vue通过es5的Object.defineProperty属性对data选项中的数据进行getter和setter设置
订阅发布指的是：vue通过自定义事件的形式，将data的变化反映到视图上去vue通过observe观察者对象反映数据的变化，然后通知vue生成新的Virtual DOM 进而渲染视图

observe 对象：
作用是：将data选项中的数据全部做一遍getter和setter设置，然后他们的变化就会被observe监听到
vuec 3.0 会将Object.defineProperty去掉改用 es6-7的observe