【精】vue中computed、methods、watch的异同比较

最新推荐文章于 2021-08-11 17:26:59 发布

李卓书

最新推荐文章于 2021-08-11 17:26:59 发布

阅读量122

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/wangbiao9292/article/details/118331279

版权

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

文章目录

异同比较

名称	释义
methods	在每次页面进行重新渲染的时候,都会去执行一次.这样做开销比较大.如果不希望页面有缓存的情况下,可以这么做
computed	computed中的属性是自定义属性.自定义属性依赖来自data中的值来进行计算,从而返回一个新的值.且computed的变量不可与data中的变量冲突.computed是可以监控到数组与对象的变化的.
watch	watch中监听的属性需要是已经存在的.存在于data中,或者是computed中.watch中可以执行异步操作.一般使用watch做一些逻辑复杂或者是异步操作的事情.以及监听到这个数据变化之后去做一些别的事情.

例子

methods与computed的区别

<body>
    <div id="computed-basics">
        <button @click="cc">click me</button>
        <div></div>
        computed:{{CCompute}}
        <div></div>
        methods:{{MCompute()}}
    </div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                list: [
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                    1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7,
                ],
            }
        },
        computed: {
            // 计算属性的 getter
            CCompute() {
                console.time("computed")
                const val = this.list.reduce((sum, value) => {
                    return sum += value;
                })
                console.timeEnd("computed")
                return val;
            },
        },
        methods: {
            MCompute() {
                console.time("methods")
                const val1 = this.list.reduce((sum, value) => {
                    return sum += value;
                })
                console.timeEnd("methods")
                return val1;
            },
            cc() {
                console.log(this.CComputed)
                console.log(this.MCompute())
            }
        },
    }).mount('#computed-basics')
</script>

在这里插入图片描述当我们点击按钮时，去获取属性值的时候，computed里面的CCompute是没有重新计算的
而methods里面的是经过重新计算的，所以对于没有依赖变化的值，是提高了性能开销

computed与watch的区别

<body>
    <div id="computed-basics">
        <button @click="cc">click me</button>
        <div></div>
        computed:{{CtestVm}}
        <div></div>
        watch:{{testVm}}
    </div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                testVm:"我是测试数据",
                testVm_denpence:"我是测试数据的依赖"
            }
        },
        computed: {
            CtestVm(){
                setInterval(() => {
                    return  this.testVm
                }, 2000);
                 
            }
        },
        methods: {
            cc() {
                this.testVm_denpence="123"
            }
        },
        watch: {
            testVm_denpence(){
                setInterval(() => {
                    this.testVm=this.testVm_denpence;
                }, 4000);               
            }
        }
    }).mount('#computed-basics')




</script>

在这里插入图片描述

结论

名称	区别
methods	1 调用需要加（） 2 重新渲染就会执行一次
computed	1 是属性，直接拿来用，函数体内需要return 2 不能执行异步函数，因为需要return，所以异步之后return就是空 3 依赖缓存，对于依赖的对象没有改变的，则属性值不会改变，所以用来进行缓存不错
watch	1 监视属性的，必须和data里的属性名一致 2 不用return，属性依赖变则监控属性变 3 可以执行异步函数，因为没有return嘛