vue中的watch和computer的使用

前端交互仔

已于 2022-03-21 21:47:37 修改

阅读量1.9k

点赞数

分类专栏： vue的系统学习文章标签：前端

于 2020-09-02 08:43:43 首次发布

原文链接：https://blog.csdn.net/zhouzy539/article/details/96340814

版权

vue的系统学习专栏收录该内容

8 篇文章 3 订阅

订阅专栏

感觉watch就类似于react中的uesEffect的使用。但是好像一般监听的都是类似于数字，对象发生改变的。vue中有什么周期了搞不懂还要这东西。

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。我们当然可以自己写代码完成这一切，但却很可能造成写法混乱，代码冗余的情况。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <p>原数据{{message}}</p>
        <p>反转后的数据{{reversedMessage}}</p>
        <button @click="add()">补充货物1</button>
        <div>总价为：{{price}}</div>
    </div>
    <script>
        var demo = new Vue({
              el: ‘#demo‘,
              data: {
                message :‘abcdefg‘,
                package: {
                    count: 5,
                    price: 5
                },
              },
              computed:{
                  reversedMessage:function(){
                      return this.message.split(‘‘).reverse().join(‘‘)
                  },
                price: function(){
                     return this.package.count*this.package.price　　
                 }
            },
             methods: {   
                add: function(){
                    this.package.count++
                }
            }    
        })
    </script>    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <p>原数据{{message}}</p>
        <p>反转后的数据{{ reversedMessage() }}</p>
    </div>
    <script>
        var demo = new Vue({
              el: ‘#demo‘,
              data: {
                message :‘abcdefg‘,
                num:5
              },
              methods:{
                reversedMessage(){
                    return this.message.split(‘‘).reverse().join(‘‘)
                },
            }
        })
    </script>    
</body>
</html>

虽然使用计算属性和methods方法来实现反转，两种方法得到的结果是相同的，但本质是不一样的，计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变的时候才会重新求值，这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性立即返回的是之前计算的结果，而不会再次执行计算函数，而对于methods方法，只要发生重新渲染，methods调用总会执行该函数。

watch主要是用来监听了，当你改变了内容，会自己监听了到你改变成了什么值。

在这里插入图片描述先监听到值，然后设置值，最后将值获取到返回到页面中。

前端交互仔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中的watch和computer的使用

watch和computed各自处理的数据关系场景不同1.watch擅长处理的场景：一个数据影响多个数据2.computed擅长处理的场景：一个数据受多个数据影响首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。我们当然可以自己写代码完成这一切，但却很可能造成写法混乱，代码冗余的情况。<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录