vue局部定时刷新

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

定时刷新一般都会想到定时器,vue局部定时刷新如下：

一、设置定时器

	timer: "",//定时器
	
	//定时器刷新待办事项
     this.timer = setInterval(() => {
      self.reload();
    }, 1000);

二、局部刷新

 <div class="DealtTop" v-if="isRefreshAlive">
 
 isRefreshAlive: true, //刷新
//局部刷新
    reload() {
      this.isRefreshAlive = false;
      this.$nextTick(function() {
        this.isRefreshAlive = true;
      });
    },

如果是在父子组件中，还需要加上provide / inject配合使用，如下：

 provide() {
    return {
      reload: this.reload
    };
  },

三、清除定时器

destroyed(){
    clearInterval(this.timer);
  },

参考链接（Vue中在组件销毁时清除定时器） 参考链接（vue组件的局部刷新） 参考链接

其实还有一些更加高级的方式,比如说WebSocket

创建一个WebSocket 对象

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

//var ws= new WebSocket(url, [protocol] );  //参数 url, 指定连接的 URL。参数 protocol 是可选的，指定了可接受的子协议
var ws= new WebSocket('ws://127.0.0.1:8088')

微信小程序创建一个 WebSocket 连接稍有不同，具体可以参考小程序文档

//小程序创建 WebSocket 连接
wx.connectSocket(Object object)
//示例代码
var ws = wx.connectSocket({
  url: 'wss://example.qq.com',
  header:{
    'content-type': 'application/json'
  },
  protocols: ['protocol1']
})
//小程序接收数据事件
ws.onMessage(data=>{
  console.log(' 返回数据'+ data.data)
})
//更多请查看小程序文档

WebSocket 属性

 ws.readyState    只读属性 readyState 表示连接状态
 0:表示连接尚未建立。
 1:表示连接已建立，可以进行通信。
 2:表示连接正在进行关闭。
 3:表示连接已经关闭或者连接不能打开。

WebSocket 事件

// 客户端和服务端建立链接时触发，此时可向服务端传递参数
  ws.onopend = function () {
    ws.send('发送数据')
  }
  // 客户端收到服务端发来的消息时，会触发onmessage事件，参数res.data中包含server传输过来的数据
  ws.onmessage = function (res) {
    console.log('接收数据：'+res.data);
  }
 //客户端收到服务端发送的关闭连接的请求时，触发onclose事件
  ws.onclose = function () {
    console.log('链接关闭');
  }
 //如果出现连接，处理，接收，发送数据失败的时候就会触发onerror事件
  ws.onerror = function () {
    console.log('链接发生错误');
  }

WebSocket 方法

ws.send();    //使用连接发送数据
ws.close();    //关闭socket链接