methods,watch,computed之间的区别

computed:

　　是计算属性，使用方式和组件中的data的使用方式一样，可以直接{{ xxx }}

　　使用范围：任何计算复杂的逻辑数据　　

　　类似于，有一个getter函数，当调用某个值的时候先调用Getter函数

<body>
  <div id="app">
    <h3>这是data中的属性--{{message}}</h3>
    <h3>这是computed中的计算属性-{{reversedMessage }}</h3> //直接使用computed中的计算属性
  </div>

 

  <script>
    

   new Vue({
    el:"#app",
    data:{
      message:"hello"
    },
    computed:{
      reversedMessage :function(){ //该计算属性数据是data中没有的数据。
        return this.message.split("").reverse().join(""); //其中message是 reversedMessage的响应式依赖。
      }
    }
   })
 
 </script>
    
</body>

　　　计算属性和methods方法的比较;

　　　　计算属性和method方法基本相同，主要是计算属性是基于响应式依赖进行缓存的，只有在相关的响应式依赖发生改变的时候才会重新求值。即存在缓存数据，当不响应式依赖不改变的时候，也不需要重新求值减少了计算量。

watch：

　　侦听属性

　　使用范围：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

  <div id="app">
      <input type="text" name="" v-model="firstname" id="">
      <input type="text" name="" v-model="lastname" id="">
      <h3>{{ fullname }}</h3>
  </div>

 

  <script>
    

   new Vue({
    el:"#app",
    data:{
      firstname:"ddd",
      lastname:'kkk',
      fullname:""
    },
    watch:{
      // 只有在firstname被修改的时候才会调用watch函数，并修改指定的数据
      //其中firstname是 data属性中存在的数据
      firstname:function(newValue,oldValue){   //可以用来记录路径历史
        //其中newValue 是修改之后的数据， oldValue是修改之前的数据值
        this.fullname = this.lastname+"-"+newValue;
      },
      lastname:function(){
        this.fullname = this.lastname+"-"+this.firstname
      }
    }
    
   })
 
 </script>

methods,watch,computed之间的区别

猜你喜欢