【Vue】零基础学习Vue: 第12课 Vue计算属性computed与methods环境的区别-CSDN博客

computed环境内：

<!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">
      姓<input type="text" v-model="a">
      名<input type="text" v-model="b">
    <br>
    {{num}}
    {{c}}
  </div>

  <script>
    let vm = new Vue({
      el:"#app",
      data: {
        a:"",
        b:"",
        c:''
      },
      //computed 当视图重新渲染时 方法get不会执行
      computed: { //存放的是时时计算属性
        fn(){
          console.log(1111)
          this.c = "啦啦啦"
        },
        num(){
          console.log(2222)
          return this.a+this.b
        }
      }
    })
  </script>
</body>
</html>

运行结果如下：

在这里插入图片描述

以下是在methods环境内：

<!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">
      姓<input type="text" v-model="a">
      名<input type="text" v-model="b">
    <br>
    {{num()}}
    {{c}}
  </div>

  <script>
    let vm = new Vue({
      el:"#app",
      data: {
        a:"",
        b:"",
        c:''
      },
      //methods 当视图重新渲染时 方法会再次 执行
      methods: {
        fn(){
          console.log(1111)
          this.c = "啦啦啦"
        },
        num(){
          console.log(2222)
          return this.a+this.b
        }
      }
    })
  </script>
</body>
</html>