computed && methods && watch

最新推荐文章于 2019-04-02 09:22:49 发布

yesyoucan_

最新推荐文章于 2019-04-02 09:22:49 发布

阅读量136

点赞数

分类专栏：前端文章标签： computed methods watch

本文链接：https://blog.csdn.net/yesyoucan_/article/details/80474416

版权

24 篇文章 0 订阅

订阅专栏

 
 methods一般用在事件绑定的方法中，每次函数调用，函数都要被重新运行一遍。 

 
 computed计算属性是基于依赖缓存的，计算属性只有当所依赖的条件发生改变时才会执行。 

  <body> 

  <div id = "app"> 

  {{msg}} 

  <br> 

  {{msg}} 

  </div> 

  </body> 

  <script> 

  var app = new Vue({ 

  el: "#app", 

  data:{ 

  num:1 

},

 
 computed:{ 

  msg:function(){ 

  alert("hello"); // 两次函数调用，弹出框只会弹出一次返回的数据也是完全相同的 

  return this.num+Math.random(); 

}

}

});

  </script> 

methods:

  <body> 

  <div id = "app"> 

  {{msg}} 

  <br> 

  {{msg}} 

  </div> 

  </body> 

  <script> 

  var app = new Vue({ 

  el: "#app", 

  data:{ 

  num:1 

},

 
  methods:{ 

  msg:function(){ 

  alert("hello"); //弹出框弹出两次，返回的两个内容结果完全不同 

  return this.num+Math.random(); 

}

}

});

  </script> 

 
  window.οnlοad=function(){ 

 
  var vm=new Vue({ 

 
  el:'#box', 

 
  data:{ 

 
  a:{name:'strive',age:16}, 

b:2

}

});

 
  vm.$watch('a',function(){ 

 
  alert('a发生变化了'); 

 
  vm.b=this.a.name; 

 
  } 
 ,{deep:true}); 
  //要对json数据类型的数据进行监听，要添加，{deep:true},对于数组不用添加 

 
  document.οnclick=function(){ 

 
  vm.a.name='aaa'; //文档加载后点击任意一处，修改a的值。a的值改变后vm.$watch函数被触发。 

};

};

关注