vue中watch和computer区别

最新推荐文章于 2024-07-25 07:30:00 发布

打码中...

最新推荐文章于 2024-07-25 07:30:00 发布

阅读量148

点赞数

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

本文链接：https://blog.csdn.net/m0_52669454/article/details/127163557

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述

computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
computed计算属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新

watch监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值

computed(计算属性) 支持缓存，只有依赖数据发生改变，才会重新进行计算。不支持异步，当computed内有异步操作时无效，无法监听数据的变化

watch(侦听属性)不支持缓存，数据变，直接会触发相应的操作；watch支持异步；

watch和computed都是以函数为基础的，但各自却都不同

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动

computed
计算属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新。

<!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>

watch
watch属性是一个对象，键是需要观察的表达式，值是对应回调函数，回调函数得到的参数为新值和旧值。值也可以是方法名，或者包含选项的对象。侦察器对于任何更新的东西都有用——无论是表单输入、异步更新还是动画。vue实例在实例化时调用$watch()，遍历watch对象的每一个属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <button @click=‘a++‘>a加1</button>
        <p>{{message}}</p>
    </div>
    <script>
        var demo = new Vue({
              el: ‘#demo‘,
              data: {
                message :‘‘,
                a:1
              },
              
              watch:{
              a:function(val,oldval){
                this.message = ‘a的旧值为‘ + oldval + ‘,新值为‘ + val;
              }
            }
        })
    </script>    
</body>
</html>