携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

Vue3学习之路|监听属性

Vue3中监听数据的变化使用watch，当数据改变后，我们可以使用watch来实现响应数据的变化并进行一系列的逻辑变化。

watch

监听属性watch实现计数器：

代码示例：

<div id = "appdemo">
    <p style = "font-size:25px;">你已经点击了: {{ counter }}次</p>
    // 使用@click计算点击次数
    <button @click = "counter++" style = "font-size:30px;">入侵</button>
</div>
    
<script>
const app = {
  data() {
    return {
      counter: 0
    }
  }
}
vm = Vue.createApp(app).mount('#appdemo')
//使用wacth开启监听模式
vm.$watch('counter', function(b, a) {
    alert('入侵次数发生变化'+a+'===>'+b);
});
</script>

watch监听了"入侵"的次数，每次点击"入侵"按钮，都能被监听到并弹窗出来，并且b为"入侵"后的次数，a为"入侵"前的次数.

异步使用watch

我们使用watch监听模式一般都是在异步加载中使用的，异步加载能够很好的给watch响应的时间，不容易造成阻塞。

安装方法

Vue3使用异步一般是使用ajax库，ajax库和一些工具的生态非常的丰富。在Vue3中使用ajax库异步一般使用axios 来完成 ajax 请求。Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

点击进入github开源地址。

CDN方法

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用npm/bower/yarn

//npm
npm install axios
//bower
bower install axios
// yarn
yarn insatall axios

使用方法

Vue.axios.get(api).then((response) => {
 //...响应数据
})

this.axios.get(api).then((response) => {
 //...响应数据
})

this.$http.get(api).then((response) => {
//...响应数据
})

GET方法

//方法属性
 mounted () {
 //axios属性实现异步
    axios
    //get请求
      .get('url/api')
      .then(response => (this.info = response))
      //失败处理抓取
      .catch(function (error) { // 请求失败处理
        console.log("发生错误："+error);
       
    });
  }

请求方法的别名

官方为了方便我们使用，于是为所有支持的请求方法提供了别名，可以直接使用别名来发起请求：这些别名不需要再method\url\data等属性中配置.

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Vue3学习之路 | Watch开启监听模式