浅谈Vue的属性,computed和watch

语法

是什么?

直接上demo,了解一下语法先~

<template>
    <div>
      <p>num1为{{ num1 }}</p>
      <p>num2为{{ num2 }}</p>
      <p>num1+num2={{ result }}</p>
      <button @click="incrementNum1">num1+1</button>
      <button @click="incrementNum2">num2+2</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        num1: 1,
        num2: 2
      };
    },
    // computed对象里面的值,能够根据其依赖发生的变化而变化,形象说,它是y,x发生变化,y自动发生变化
    computed: {
      result() {
        return this.num1 + this.num2;
      }
    },
    // watch
    watch: {
        num1(newValue, oldValue) {
            console.log(`num1 changed from ${oldValue} to ${newValue}`);
        },
        num2(newValue, oldValue) {
            console.log(`num2 changed from ${oldValue} to ${newValue}`);
        },
        result(newValue, oldValue) {
            console.log(`result changed from ${oldValue} to ${newValue}`);
        }
    },
    methods: {
      incrementNum1() {
        this.num1++;
      },
      incrementNum2() {
        this.num2=this.num2+2;
      }
    }
  };
  </script>
<style>
button{
    display: block;
    margin-top: 20px;
}
</style>  

相同点

conputed是计算属性,watch是监听属性,本质上都是同一个watcher实例,它们都是通过响应式系统与数据,页面建立通信

不同点

  1. computed带有"懒计算"功能

  2. 监听的逻辑有差异:computed是依赖的值变了,它去重新求值,watch是目标值变了,它去执行函数

  3. 深层到代码:在数据更新时, 计算属性的dirty状态会立即改变, 而监听属性与组件重新渲染, 至少都会在下一个"tick"执行,故监听属性是异步触发的

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值