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

一、作用机制上

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

二、从性质上

1.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）。

2.watch:类似于监听机制+事件机制。

例如：

watch: {
   firstName: function(val) {this.fullName = val +this.lastName }

}

firstName的改变是这个特殊“事件”被触发的条件，而firstName对应的函数就相当于监听到事件发生后执行的方法

三、watch和computed的对比

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

  • watch和computed也有明显不同的地方：

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

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

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

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>
# javascript # html5 # es6
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue