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

computed环境内：

  
  Document
  


  

      姓
      名
    
    {{num}}
    {{c}}
  

  
    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
        }
      }
    })
  

运行结果如下：

以下是在methods环境内：

  
  Document
  


  

      姓
      名
    
    {{num()}}
    {{c}}
  

  
    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
        }
      }
    })
  

运行结果入下：

小结：

computed： 当某变量变化时视图重新渲染 调用其他变量的方法不会执行，只有自身内有变量变化的函数才会执行 methods： 当某变量变化时视图重新渲染 调用其他变量的方法会一起执行