Vue中computed(计算属性)、methods、watch的区别

你的名字 2023-08-17 17:38 144阅读 0赞

#### 实现效果：字符串的动态拼接 ####

![在这里插入图片描述][70]

**methods方法**

html：

js：

let vm = new Vue({
                el: '#app',
                data: {
                    firstname: '',
                    lastname: '',
                    fullname: ''
                },
                methods: {
                    getFullName() {
                        this.fullname = this.firstname + '+' + this.lastname;
                    }
                }
            });

**watch方法**

*  值是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值
 *  值是函数名：不过这个函数名要用单引号来包裹
 *  值是包括选项的对象：选项有三个

1.  　　第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
2.  　　第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
3.  　　第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

var vm = new Vue({ 
      data: { 
        a: 1, 
        b: 2 
      }, 
      watch: { 
        a: function (newVal, oldVal) { 
          console.log('new: %s, old: %s', newVal, oldVal) 
        }, 
        // 方法名 
        b: 'someMethod', 
        // 选项的对象 
        c: { 
          handler: function (newVal, oldVal) { /* ... */ }, 
          deep: true， 
          immediate: true 
        } 
      } 
    })

实例：

html：

js：

**注意：虽然看起来 keyup 在这个例子中显得更简单，但是 watch 在一些无键盘点击操作时要监听改变会显得很有用。例如：监听路由地址改变 、购物车添加商品（因为数字变动不方便用事件监听）。还有 watch 不要用箭头函数的方式获取 newVal、oldVal，这样会导致 this 绑定错误**

**computed方法**  
html：

js：

let vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: ''
            },
            computed:{
                // 在 computed 中，可以定义一些属性，这些属性叫做【计算属性】，
                // 本质就是一个方法，只是使用这些计算属性的时候，是把他们的名称，
                // 之间当做属性来使用，并不会把计算属性当做方法调用；
    
                // 注意 1：计算属性在引用的时候，不要加小括号调用，直接当做普通属性去使用
                // 注意 2：只要计算属性，这个 function 中，所用的任何 data 中的数据发生了变化，就会
                // 立即重新计算这个计算属性的值，否则不会对计算属性从新求值
                // 注意 3：计算属性的求值结构，会被缓存起来，方便下次直接使用
                fullname:function () {
                    return this.firstname+'+'+this.lastname
                }
            }
        });

**三者区别**

*  **计算属性（computed）**：一定要返回一个值，属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当做属性来使用，适合简单的计算；
 *  **方法（methods）**：表示一个具体的操作，主要书写业务逻辑，通过调用执行；
 *  **监听（watch）：**一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看做 computed 和 methods 的结合体

转载于:https://www.cnblogs.com/ysx215/p/11436374.html

[70]: /images/20230808/bdbf31c833214d5c851a70d377438263.png