数据局部刷新案例：分别用原生JS和Vue实现局部刷新

今天来分享下，如何用原生JS和Vue实现局部刷新。

原生JS局部刷新

使用XMLHttpRequest

使用XMLHttpRequest对象进行异步请求：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('GET', 'example.php', true);
// 发送请求
xhr.send();
// 监听响应状态变化
xhr.onreadystatechange = function() {
  // 响应完成且响应状态为200时，更新页面
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 更新DOM节点内容
    document.getElementById('result').innerHTML = response;
  }
};

使用fetch API进行异步请求

// 发送GET请求
fetch('example.php')
  .then(function(response) {
    // 将响应解析为文本格式
    return response.text();
  })
  .then(function(data) {
    // 更新DOM节点内容
    document.getElementById('result').innerHTML = data;
  });

使用事件监听器进行局部刷新

// 获取要刷新的DOM节点
var node = document.getElementById('result');
// 添加点击事件监听器
node.addEventListener('click', function() {
  // 发送请求获取更新内容
  fetch('example.php')
    .then(function(response) {
      // 将响应解析为文本格式
      return response.text();
    })
    .then(function(data) {
      // 更新DOM节点内容
      node.innerHTML = data;
    });
});

需要注意的是，使用以上方式进行局部刷新时，需要确保返回的数据格式与页面中要更新的DOM节点类型匹配。另外，使用异步请求时需要注意跨域问题。

vue 局部刷新

我们直接上代码：

<template>
	<div v-if="isRouterAlive">33333333</div>
	<div class="search-box" @click="search">
	 	<svg-icon icon-class="search-icon" class="search-icon" />
	</div>
</template>
<script>
provide() {
   return {
     reload: this.reload
   }
},
 data() {
  return {
  	isRouterAlive: true
  }
 },
 methods: {
    reload() { // 局部刷新
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    search() {
   	  this.reload()// 在需要局部刷新的地方进行调用
    }
}