零基础学习Vue: 第10课 Vue计算属性computed与methods环境的区别_vue2.6.10版本打包之后,部署在生产上的computed计算结果和dev环境的不一样-CSDN博客

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

零基础学习Vue: 第10课 Vue计算属性computed与methods环境的区别：

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>