计算属性computed的使用，watch？

最新推荐文章于 2024-04-07 20:18:42 发布

孙德海

最新推荐文章于 2024-04-07 20:18:42 发布

阅读量116

点赞数

分类专栏： vue 文章标签： vue js 前端

本文链接：https://blog.csdn.net/sdh19981202/article/details/108969936

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文探讨了Vue.js中watch和computed属性在处理数据变化时的不同策略。watch主要用于监听特定数据的变化并执行相应操作，而computed则用于创建基于现有数据的计算属性，缓存结果以提高性能。当需要在数据变化时执行复杂操作时，应使用watch；若需依赖多个数据并希望自动更新，宜选择computed。示例代码展示了如何在实际项目中应用这两种方法。

摘要由CSDN通过智能技术生成

watch和computed

需求： 做一个值是num值的2倍的关系
methods：
                1.{{num*2}} 可以实现这个功能效果 发现不方便进行管理
                2.可以把多次重复的一些代码封装成一个函数进行调用
                发现页面中如果使用了无关数据的话，当无关数据发生改变的时候，这个doubleNum方法也会被调用，重新计算结果
                3.可以通过watch监听器来去实现效果。
                
                
watch:

        
                watch可以监听现有的数据的改变，然后当现有的数据发生改变后，接下来实现对应的业务逻辑。

computed

4.我们可以通过computed(计算属性)来去解决此问题。
                 计算属性写法是一个函数，但是在界面中调用的话需要写成属性的方式进行调用
                 计算属性会根据现有的数据生成一个新的数据，并且两者会产生关联，建立永久性缓存
                 并且当无关数据发生改变的时候，计算属性内部不会重新计算，而是直接从缓存里面取值使用即可。

computed vs watch的区别？

1.watch的监听只能是单个的监听，每次监听只能监听一个变量的修改，不能同时监听多个变量的修改
                   计算属性computed可以依赖多个数据的变化（并且只跟他所依赖的项进行关联）
                 2.当需要在数据变化时执行异步或开销较大的操作时，只能采用watch

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    
</style>
<body>
    <div id="app">
        <p>num: {{num}}</p>
        <p><input type="text" v-model="msg"></p>
        <p @click="num++">按钮点击num</p>
        <p>{{num*2}}</p>
        <p>doubleNum: {{doubleNum()}}</p>
        <p>computdNum: {{computedNum}}</p>
    </div>
    <script src="./base/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num:1,
                msg:"hello",
                watchNum:""
            },
            computed:{
                computedNum(){
                    // console.log("computedNum....")
                    return this.num*2
                }
            },
            watch:{
                num:{
                    immediate:true,//初始化的时候也会执行一次
                    handler(newValue,oldValu){
                        this.watchNum = newValue*2
                    }
                },
            },
            methods:{
                doubleNum(){  
                    // console.log("doubleNum这个函数倍调用了...")
                    return this.num*2
                }
            }
        })
    </script>
</body>
</html>

孙德海

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
计算属性computed的使用，watch？

watch和computed需求：做一个值是num值的2倍的关系methods： 1.{{num*2}} 可以实现这个功能效果发现不方便进行管理 2.可以把多次重复的一些代码封装成一个函数进行调用发现页面中如果使用了无关数据的话，当无关数据发生改变的时候，这个doubleNum方法也会被调用，重新计算结果 3.可以通过watch监听器来去实现效果。
复制链接

扫一扫

专栏目录