方法调用、computed、watch的区别

区别:

方法:页面数据每次重新渲染都会重新执行。性能消耗大;除非不希望有缓存的时候用。
computed:是计算属性,依赖其他属性计算值,并且computed的值只有缓存,只有当计算值变化才会返回内容。
watch:监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。watch也支持异步。

总结:

除非不希望缓存,一般都不会用方法;
一般来说需要依赖别的属性来动态获取值的时候可以使用computed;
对于监听到值的变化需要做异步操作或开销较大的操作时候用watch;

具体使用方法:

1.watch的使用:

<body>
  <div id="app">
    <input type="text" v-model = "zzx">
  </div>
  <script src="../vue.js"></script>
  <script>
    var vue = new Vue({
     
      el:"#app",
      data: {
     
        firstName:"",
        lastName:"",
        count:0,
        zzx:"wrx",
        stus:[{
     name:"jack"}],
        arr:[
          {
     tit:"手机",num:1,price:"1000"},
          {
     tit:"电视",num:2,price:"2000"},
          {
     tit:"电脑",num:3,price:"3000"},
        ],
        sum:0
      },
      methods:{
     

      },
      computed:{
     
        fullName(){
     
          return this.firstName + this.lastName
        }
      },
      watch:{
     
   // watch监听的属性,必须是已经存在的,要么是data里面的,要么是computed里面的
   //watch允许异步操作
        zzx(newVal,oldVal) {
     
          console.log(newVal,oldVal);
          this.count++;
        },
       }
    });
  </script>
</body>

我们可以发现一旦输入框中的文字改变,即zzx发生改变;watch内监听zzx的函数就会被调用

但是上面的方法只能监听基本类型,要想监听复杂数据类型array;object,需要用深度监视。

<button v-on:click = 'stus[0].name = "xxx"'>click</button>
<h5>{
     {
     stus}}</h5>
    

下面就是深度监视的方法,可以发现当stus数据被改变的时候,stus内的回调函数被调用。

stus:{
     
      deep:true,//深度监视
      handler:function (newV,oldV) {
     
      console.log(oldV[0]);
      console.log(newV[0]);
     }
 },
<button v-on:click = "arr[0].num = 2">修改arr数据</button>
<h5>总价格:{
     {
     sum}}</h5>
watch:{
     
   arr: {
     
          immediate:true,
          deep: true,
          handler(){
     
            let res = 0;
            for (let i = 0; i < this.arr.length; i++) {
     
              res = res + this.arr[i].num * this.arr[i].price;
            }
            this.sum = res
          }
        }
  }

但是怎么样让其初始化就可以计算呢?而不是一定要等到数据修改后才可以,我们添加一个immediate:true,

你可能感兴趣的