零基础学习Vue:第11课 watch侦听属性、计算属性缓存computed、方法methods的区别

最新推荐文章于 2024-05-11 11:10:02 发布

舜岳

最新推荐文章于 2024-05-11 11:10:02 发布

阅读量791

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41614928/article/details/89326737

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

零基础学习Vue:第11课计算属性缓存computed、方法methods、侦听属性watch的区别

计算属性缓存computed：

当页面内需要显示computed内的属性时，则其中某一计算属性的值变化，其他属性不会重新执行计算，只执行改变属性的方法，因为计算属性存在缓存。

方法methods：

当页面内需要使用methods内的方法时，则其中某一个方法内的属性变化，则其他方法都需要执行，计算出新的结果，因为方法内不存在缓存。

侦听属性watch:

监控data中属性的变化，当需监控的属性变化时才会触发该监控函数

下面来看看侦听属性watch：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
  <div id="app">
     <div>___{{bbb}}___{{aaa}}__</div>
     <div>{{fullName}}___{{ccc}}</div>
  </div>

  <script>
    let vm = new Vue({
      el:"#app",
      data: {
        firstName:"小",
        lastName:"明",
        fullName:"",
        bbb:"1",
        aaa:"2",
        ccc:""
      },
      watch:{
        bbb(){
          console.log(11111)
          this.fullName = this.firstName + this.lastName;
        },
        aaa(){
          console.log(22222)
          this.ccc = this.bbb + this.aaa;
        }
      }
    })
  </script>
</body>
</html>