Vue计算属性与侦听属性的应用场景

简介: Vue计算属性与侦听属性的应用场景

计算属性中不能进行异步操作:

计算属性中我们不能进行异步操作,例如:不能使用定时器、不能处理 Ajax 请求。

<div id="APP">
  姓:<input type="text" v-model="firstName"> <br/><br/>
  名:<input type="text" v-model="lastName"> <br/><br/>
  全名: <span>{{fullName}}</span>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      firstName: "张",
      lastName: "三"
    }
  },
  computed:{
    fullName(){
      setTimeout(() => {
        return this.firstName + '-' + this.lastName;
      },1000)
    }
  },
});

:在计算属性内使用异步操作会导致没有内容。

 

侦听属性中可以进行异步操作:

在侦听属性中我们可以进行异步操作,可以使用定时器、也可以处理 Ajax 请求。

<div id="APP">
  姓:<input type="text" v-model="firstName"> <br/><br/>
  名:<input type="text" v-model="lastName"> <br/><br/>
  全名: <span>{{fullName}}</span>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      firstName: "张",
      lastName: "三",
      fullName: "张-三"
    }
  },
  watch:{
    firstName(newValue){
      setTimeout(() => {
        this.fullName = newValue + '-' + this.lastName;
      },1000)
    },
    lastName(newValue){
      setTimeout(() => {
        console.log(this); // Vue
        this.fullName = this.firstName + '-' + newValue;
      },1000)
      // 这里不能使用普通函数,普通函数的 this 指向 window
      setTimeout(function(){
        console.log(this); // window
      },1000)
    }
  },
});

:在 Vue 中使用定时器必须使用箭头函数!因为箭头函数的指向是静态的,会继承外部 this 的指向,如果使用普通函数, this 将不会指向 Vue 实例,而是指向 window 对象。

 

重点总结

所有被 Vue 管理的函数【data 函数、computed 中的函数、watch 中的函数等】,最好写成普通函数,这样 this 的指向才是 Vue 实例 或 组件实例对象。

所有不被 Vue 管理的函数【定时器的回调函数、Ajax 的回调函数、Promise 的回调函数】,最好写成箭头函数,这样 this 的指向才是 Vue 实例 或 组件实例对象。

原创作者 :吴小糖

创作时间:2023.6.3

相关文章
|
2天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
|
2天前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
2天前
|
JavaScript
vue 页面刷新、重置、更新页面所有数据
vue 页面刷新、重置、更新页面所有数据
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
972 0
|
2天前
|
JavaScript
在Vue中,如何使用`$once`侦听一个事件?
在Vue中,如何使用`$once`侦听一个事件?
6 1
|
2天前
|
存储 JavaScript 前端开发
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
7 2
|
2天前
|
存储 JavaScript
Vue中如何在组件销毁时清理定时器?
Vue中如何在组件销毁时清理定时器?
5 1
|
2天前
|
JavaScript 前端开发
在Vue中,如何使用异步组件?
在Vue中,如何使用异步组件?
8 1
|
2天前
|
JavaScript 前端开发
Vue中如何实现组件的按需加载?
Vue中如何实现组件的按需加载?
6 1
|
2天前
|
JavaScript
Vue中的插槽Slot的使用说明
Vue中的插槽Slot的使用说明
7 1