vue中Computed、Methods、Watch区别

芋圆味糖罐

已于 2022-02-11 10:32:24 修改

阅读量1k

点赞数

文章标签： vue.js javascript 前端

于 2022-01-27 14:48:17 首次发布

本文链接：https://blog.csdn.net/m0_62351775/article/details/122690045

版权

computed

计算属性只有当依赖值发生改变时才会重新计算，否则会缓存生成的属性值无论多少次使用都只调用一次

<template>
  <div class="home">
    {{formMsg}}
    <button @click="formMsg = '芋圆味糖罐'">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  },
  computed: {
    formMsg() {
    // 必须要有返回值，没有return值为undefined，计算属性作为属性({{formMsg}})去使用
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

当我们去点击按钮修改formMsg的值时，浏览器会报错
在这里插入图片描述
这是因为计算属性不能直接赋值，它里面没有设置set属性，我们需为其添加一个set属性

<template>
  <div class="home">
    {{formMsg}}	// 会显示：芋圆味糖罐
    <button @click="formMsg = '芋圆味糖罐'">点击修改</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'hello'
    }
  },
  computed: {
    formMsg: {
      get() {
      	return this.msg
      },
      set(val) {
      	this.msg = val
      }
    }
  }
}
</script>

特性

计算属性只有当依赖值发生改变时才会重新计算，否则会缓存生成的属性值无论多少次使用都只调用一次

<template>
  <div class="home">
    {{formMsg}}
    {{formMsg}}
    {{formMsg}}
    {{formMsg}}
    <button @click="msg= '芋圆味糖罐'">点击改变msg</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'hello'
    }
  },
  computed: {
    formMsg() {
      console.log(1)
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>
不管我们使用多少次{{formMsg}}，在浏览器中都只会输出一个1
只有当点击按钮[msg发生了变化]，才会再次输出1

watch

深度监听

# 对象
<template>
    <div class='home'>
        <button @click="obj.name = 'uu盘'">改变对象中name属性</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj:{
                name:'hello',
            }
        };
    },
    watch:{
    	// 方法一：监听对象中的单个属性变化的方法
        'obj.name'(newVal,oldVal) {
            console.log(newVal);    // uu盘
            console.log(oldVal);    // hello
        },
        // 方法二：深度监听 可以监听引用数据类型中所有的属性
        obj:{
            handler(val) {
                console.log(val); // {name:'uu盘'}
            },
            deep:true,		// 开启深度监听
            immediate: true	// 页面进入后数据监听会立即执行一次
        }
    }
};
</script>
# 数组
<template>
    <div class='home'>
        <button @click="change">改变数组</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr:[1,2,3]
        };
    },
    methods:{
        change() {
            this.arr.push(4)
        }
    },
    watch:{
        // 监视程序只接受简单的点分隔路径(obj.name)
        // 'arr[0]'(newVal,oldVal) {	错误写法
        //     console.log(newVal,oldVal);
        // }
        arr:{
            handler(val) {
                console.log(val);	// [1,2,3,4]
            },
            deep:true
        }
    }
};
</script>

methods

methods 方法表示一个具体的操作，主要书写业务逻辑

<template>
    <div class='home'>
        你购买的数量：{{num}}<br>
        <button @click="add">增加数量</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num:1,
        };
    },
    methods: {
        add() {
            this.num++
        }
    }
};
</script>

methods和computed的区别

computed是属性调用，而methods是函数调用
computed带有缓存功能，而methods不会被缓存
属性调用是 {{reverseMsg}}
函数调用 {{reverseMesssage()}}

<div id="app">
  {{reverseMsg}}
   <hr>
  {{reverseMesssage()}}
</div>

app = new Vue({
        el:"#app",
        data:{
            msg:"hello word",
        },
        methods:{
            reverseMesssage(){
                return this.msg.split("").reverse().join("");
            },
        },
        computed:{
            reverseMsg(){
                return this.msg.split("").reverse().join("");
            },
        }
    });