浅谈Vue的属性,computed和watch

发布时间:2024年01月17日

语法

是什么?

直接上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"执行,故监听属性是异步触发的

文章来源:https://blog.csdn.net/m0_61768030/article/details/135586583
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。