十秒看懂computed和watch的区别（vue的简单计算和复杂监听）

哎呀你干嘛啊

已于 2022-08-04 10:13:26 修改

阅读量259

点赞数 2

分类专栏：前端 vue watch和computed的区别文章标签： vue.js 前端 javascript

于 2022-08-04 09:58:46 首次发布

本文链接：https://blog.csdn.net/m0_65450343/article/details/126153518

版权

前端同时被 3 个专栏收录

53 篇文章 18 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

watch和computed的区别

1 篇文章 0 订阅

订阅专栏

1，计算属性 computed

computed 计算属性：通过原本属性进行计算产生一个新的属性
计算属性不写在data里面写在computed中

重点：它是由原本的属性（data中的数据）产生的新的属性

下方是部分代码演示：（自行引入vue）

<body>
    <div id="app">
        <p>
            姓：<input type="text" v-model="firstName">
        </p>
        <p>
            名字：<input type="text"  v-model="lsatName">
        </p>
        {{allName}}
    </div>
    <script>
        //通过 firstName和lastName计算一个新的属性
        //当firstName或者lastName实时更新
        //computed 计算属性 ：通过原本属性进行计算 产生一个新的属性******
        // 计算属性 不写在data里面 写在computed中
        let vm=new Vue({
            el:"#app",
            data:{
                firstName:"",
                lsatName:""
            },
            computed:{
                allName(){
                    return this.firstName+this.lsatName
                }
            }
        })
    </script>
</body>

2，watch 监听

watch 不产生新的属性，只是在原有的内容进行更改，通过监听某个数据的变化改变其他数据，实现复杂操作——

watch 用于复杂逻辑，搜索！！ input框值发送变化时，AJax请求，当数据变化实现功能较为复杂时，使用watch,watch不是只对属性服务，可以写多种操作

<body>
    <div id="app">
        <p>
            当前温度：<button @click="reduce()">-</button>{{temperature}} <button @click="add()">+</button>
        </p>
        <p>
            建议穿衣指数：{{dress}}
        </p>
    </div>
    <script>
        // watch选项：监听选项 对vue中某一个数据进行监听，当数据发生变化时，执行对应函数
       
        // 20以上 短袖
        //10-20 长袖
        //0-10 外套
        //0    棉衣
        let vm=new Vue({
            el:"#app",
            data:{
                temperature:20,
                dress:"半袖"
            },
            methods: {
                reduce(){
                    this.temperature--
                },
                add(){
                    this.temperature++
                }
            },
            watch:{
                temperature(){
                    console.log(1)
                    if(this.temperature<20){
                        this.dress="长袖"
                    }
                }
            }
        })
    </script>
</body>

通过监听温度的变化，自动改变穿衣指数，监听的是温度，而改变的是穿衣指数，也可以同时改变多个属性，可听一变则万变

当然了这个逻辑简单用computed也可以做

watch和计算属性区别：
1.watch 不产生新的属性，只是在原有的内容进行更改
computed 利用原本属性，产生一个新的属性
2. computed 用于基于原有数据，可以直接计算出来的内容，计算属性中通常写的都是简单的逻辑一些基本的计算和对应的判定
watch 用于复杂逻辑，搜索！！ input框值发送变化时，AJax请求，当数据变化实现功能较为复杂时，使用watch,watch不是只对属性服务，可以写多种操作

是不是一眼就看懂了，别急着走，点个赞吧！

哎呀你干嘛啊

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十秒看懂computed和watch的区别（vue的简单计算和复杂监听）

十秒看懂computed和watch的区别（vue的简单计算和复杂监听）watch和计算属性区别： 1.watch 不产生新的属性，只是在原有的内容进行更改 computed 利用原本属性，产生一个新的属性 2. computed 用于基于原有数据，可以直接计算出来的内容，计算属性中通常写的都是简单的逻辑一些基本的计算和对应的判定 watch 用于复杂逻辑，搜索！！ input框值发送变化时，AJax请求，当数据变化实现功.........
复制链接

扫一扫