Vue中computed(计算属性)methodswatch的区别

Posted ysx215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中computed(计算属性)methodswatch的区别相关的知识,希望对你有一定的参考价值。

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

技术图片

methods方法

html

<div id="app">
    <!-- 监听到文本框数据的改变 -->
    <input type="text" v-model="firstname" @keyup="getFullName">+
    <input type="text" v-model="lastname" @keyup="getFullName">=
    <input type="text" v-model="fullname">
</div>

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:

<div id="app">
    <!-- 监听到文本框数据的改变 -->
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
</div>

js:

        let vm = new Vue(
            el: #app,
            data: 
                firstname: ‘‘,
                lastname: ‘‘,
                fullname: ‘‘
            ,
            watch: 
                // 使用这个属性,可以监听 data 中指定数据的变化,
                // 然后触发 watch 中对应的 function 处理函数
                // 其中传参:第一个(newVal)是指改变后的值,第二个(oldVal)是原值
                firstname: function (newVal, oldVal) 
                    // this.fullname = this.firstname + this.lastname;
                    this.fullname = newVal + + + this.lastname;
                ,
                lastname: function (newVal, oldVal) 
                    // this.fullname = this.firstname + this.lastname;
                    this.fullname = this.firstname + + + newVal;
                
            
        );

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

computed方法
html:

<div id="app">
    <!-- 监听到文本框数据的改变 -->
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
</div>

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 的结合体

 

以上是关于Vue中computed(计算属性)methodswatch的区别的主要内容,如果未能解决你的问题,请参考以下文章

vue中computed计算属性与methods对象中的this指针

怎样理解 Vue 中的计算属性 computed 和 methods ?

Vue考点

vue实例属性之methods和computed

computed之计算属性

vue之computed(计算属性)的使用方法有哪些?