精华内容
下载资源
问答
  • 计算属性和watch的区别
    千次阅读
    2021-08-18 19:49:09

    1、计算属性有缓存,当缓存的依赖发生变化时,重新计算,返回一个返回值;

    2、计算属性有getter和setter,默认为getter.监听属性不分set和get。

    3、计算属性用来同步执行计算数据,监听属性可以有异步事件。

    备注:

    在vue2中可以使用计算属性返回data对象里如obj:{a:1,b:2}的a 的属性,使用监听这时可以使用监听属性监听到 属性a 的变化; 在vue2后面的一些版本里也可以使用obj.a 对 属性a进行监听。

    更多相关内容
  • 二、computed计算属性 1、使用方法data中的数据一样,但是类似一个执行方法 2、在调用时候不加() 3、必须有return返回 4、如果函数所依赖的属性没有发生变化,从缓存中读取 5、应用场景—求和,示例 <el-form...

    一、总述

    computedwatch都是vue框架中的用于监听数据变化的属性。

    二、computed计算属性

    1、使用方法和data中的数据一样,但是类似一个执行方法
    2、在调用时候不加()
    3、必须有return返回
    4、如果函数所依赖的属性没有发生变化,从缓存中读取
    5、应用场景—求和,示例

    <el-form>
       <el-row>
         <el-col :span="24" style="display:flex;justify-content:flex-end;">
           <span><i>当前价税合计:</i>{{Total}}</span>
         </el-col>
       </el-row>
     </el-form>
    
    computed:{
        Total(){
          let price = 0;
          for (let i = 0;i<this.tableData.length;i++) {
            price += this.tableData[i].taxUnitPrice * this.tableData[i].invNum
          }
          this.detailedSend.total = price
          return price;
        },
      },
    

    三、watch监听

    1、watch的函数名称必须和data中的数据名一致
    2、watch中的函数有两个参数,前者是newVal,后者是oldVal
    3、watch中的函数是不需要调用的
    4、watch只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变,要深度监听需要配合deep:true属性使用
    5、immediate:true 页面首次加载的时候做一次监听
    6、应用场景—即使搜索,代码示例

    <template>
        <div>
            vue使用watch监听实现类似百度搜索功能
            <div>
                <input type="text" class="search" placeholder="搜索" v-model.trim='keyword' />
            </div>
            <div v-show="keyword">
                <ul>
                    <li v-for="item in cityList" :key="item.id" @click="handleCityClick(item.name)">
                        {{item}}
                    </li>
                </ul>
            </div>
        </div>
    </template>
    
    <script>
    // 防抖函数
    const delay = (function () {
        let timer = 0;
        return function (callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback.ms)
        }
    })()
    export default {
        data () {
            return {
                keyword: '',
                cityList: [],
                timer: null,
                jsonData: [{
                    'id': 1,
                    'name': '北京'
                },
                {
                    'id': 2,
                    'name': '上海'
                },
                {
                    'id': 3,
                    'name': '广州'
                },
                {
                    'id': 4,
                    'name': '深圳'
                },]
            }
        },
        watch: {
            keyword () {
                //函数防抖
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                //删除文字  清零
                if (!this.keyword) {
                    this.cityList = []
                    return
                }
                this.timer = setTimeout(() => {
                    const result = []
                    this.jsonData.forEach(val => {
                        if (val.name.indexOf(this.keyword) > -1) {
                            result.push(val.name)
                        }
                    });
                    this.cityList = result
                    console.log(this.cityList)
                }, 100)
            }
        },
    }
    </script>
    

    四、区别

    1、功能computed是计算属性;watch是监听一个值的变化执行对应的回调
    2、是否调用缓存computed函数所依赖的属性不变的时候会调用缓存;watch每次监听的值发生变化时候都会调用回调
    3、是否调用returncomputed必须有;watch可以没有
    4、使用场景computed当一个属性受多个属性影响的时候;例如购物车商品结算;watch当一条数据影响多条数据的时候,例如搜索框
    5、是否支持异步computed函数不能有异步;watch可以

    展开全文
  • 计算属性watch区别

    千次阅读 2021-07-12 18:57:14
    计算属性是基于它们的响应式依赖进行缓存的 computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数 多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 应用场景:一个数据受多个...

    计算属性是基于它们的响应式依赖进行缓存的 computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数
    多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
    应用场景:一个数据受多个数据影响 使用watch来响应数据的变化 一般用于异步或者开销较大的操作 watch 中的属性 一定是data 中 已经存在的数据
    当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听
    应用场景:监听单个变量或一个数组

    <div id="app">
            <input type="text" v-model="firstName">
            <input type="text" v-model="lastName">
            <p>全名:{{fullName}}</p>
        </div>
        <script>
          // 监听器能够用来监听data中数据的变化,并且执行相应的操作
          var vm = new Vue({
            el: '#app',
            data: {
              firstName: '李',
              lastName: '白',
              // 定义变量来接受新的全名
              fullName: ''
            },
            // 创建监听器在watch属性中
            watch: {
              // 要监听谁,就将该变量拿过来作为一个函数名字, 这个函数中带有newVal, 
              和 oldVal两个参数,参数名字随意
              firstName(newVal, oldVal) {
                console.log(newVal, oldVal);
                this.fullName = newVal + this.lastName
              },
              lastName(newVal, oldVal) {
                this.fullName = this.firstName + newVal
              }
            }
    
            // watch 和 computed对比
            // 1. computed性能比watch更好,我们能用computed实现就用computed去实现
            // 2. 涉及到异步数据的时候,就需要用watch
          })
        </script>
    
    
    
      watch: {
        cityName: {
          handler(newName, oldName) {      // ...    },
        deep: true,
        immediate: true
        }
      } 
    
    展开全文
  • computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,...
    1. computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

    2. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed

    3. 如果computed属性属性值是函数 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

    在这里插入图片描述

    [](()侦听属性watch:

    1. 不支持缓存,数据变,直接会触发相应的操作;

    2. watch支持异步

    3. 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值

    4. 当一个属性发生变化时,需要执行对应的操作;一对多

    5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,

    展开全文
  • 这里写自定义目录标题计算属性computed和watch区别两者的主要区别验收一下 计算属性computed和watch区别 通俗的来说既能实现computed又能够实现watch的推荐使用computed,重点在于computed的缓存功能。computed...
  • watch(监视属性)computed(计算属性)的区别

    千次阅读 多人点赞 2022-06-05 09:42:54
    本篇文章结合实例详述了watch和computed两个属性区别
  • Vue 中方法,计算属性和Watch监听的区别 方法 方法函数时没有缓存的; 每次调用时,都会重新执行该函数,可以有返回值也可以没有返回值; 计算属性 计算属性是有缓存的,只要相关依赖没有改变,多次访问计算属性...
  • 计算属性computed和watch区别通俗的来说既能实现computed又能够实现watch的推荐使用computed, computed有缓存功能。 computed是用来声明式的描述一个值依赖其它的值,当所有依赖的值或者变量改变的时候,计算属性...
  • computed 计算属性:依赖其它属性值,并且computed的值有缓存,只有它依赖的属性值发生改变,下一次获取computed的值时才会重新计算computed的值。 watch 侦听器:更多的是观察的作用,无缓存性,类似与某些数据的...
  • vue计算属性和watch区别是什么?

    千次阅读 2020-07-02 00:40:11
    vue中计算属性和watch区别 学习vue框架,一定少不了学习计算属性computed和watch computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值...
  • Vue的计算属性watch

    2021-01-30 22:10:36
    如果它所依赖的这些属性值没有发生改变,那么计算属性的值是从缓存中来的,而不是重新编译,那么它的性能就会比较高,所以Vue中尽可能的使用computed来代替watch。 <!DOCTYPE html> <html> <hea
  • 1.计算属性和 watch区别 计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。 所以区别来源于用法,只是需要动态值,那就用计算属性;需要...
  • 1.前面我们知道计算属性computed: 当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理 侦听数据的变化Watch1.在options API中,我们可以通过watch 选项来侦听data或者props的数据变化,当数据变化时...
  • watch是属性监听器,一般用来监听属性变化,或者计算属性的变化(例如监听input中绑定的值的变化,用来实现即时搜索) 场景:监听data或者computed变化,变化了就会调用方法 总结:computed watch 的使用场景并...
  • vue中计算属性和watch区别

    万次阅读 2018-03-14 10:23:37
    学习vue框架,一定少不了学习计算属性computed和watch computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 ...
  • 计算属性返回一个变量,是用来提供值的 watch变量则是根据某变量的变化来进行某些操作(比如调用函数)
  • methods ,计算属性 computed watch区别 1. methods 执行n次,运行n次 2. computed 当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性 计算属性 computed 是基于data中数据进行处理的,data数据...
  • 一、计算属性:可以理解为能够在里面写一些计算逻辑的属性(数据缓存,当我们的数据没有变化时,不会再次执行计算的过程) computed: { name: { //获取计算属性 get: function () { return this.firstname + '...
  • 计算属性和监视属性的区别 计算属性(computed) 定义:要用的属性不存在,得通过data中已有的属性计算得来 原理:底层通过Object.defineproperty方法提供的gettersetter computed中可以分为gettersetter,一般...
  • #####计算属性和methods的区别 两种方式得到的结果是相同的。 不同的是计算属性是基于变量的值进行缓存的,只要在它关联的变量值发生变化时计算属性就会重新执行。而methods没有缓存,所以每次访问都要重新执行...
  • 使用场景:当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性计算属性computed是基于data中的数据进行处理的,data数据变化,他也跟着变化 当data中的数据没有发生改变时,我们调用computed中的...
  • 不同的是计算属性是基于变量的值进行缓存的,只要在它关联的变量值发生变化时计算属性就会重新执行。而methods没有缓存,所以每次访问都要重新执行。2、计算属性的特点计算属性使数据处理结构清晰;依赖于数据,如果...
  • 本文主要给大家介绍了关于vue中计算属性(computed)、methodswatched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 普通属性一样是在模板中绑定计算属性的,当data中对应数据发生...
  • 相同点: 1. 语法角度( a 从思想上都...2. 从功能角度:计算属性有缓存、响应式依赖,侦听器没有缓存常用于搜索、监控数据变化、代替事件等,计算属性可以监听多个模型数据变化,侦听器只能监听一个数据变化。 ...
  • vue的计算属性计算属性与方法的区别?计算属性watch有什么区别
  • 计算属性(computed)监听器(watch)的区别

    千次阅读 多人点赞 2019-10-29 16:35:25
    不少刚刚学习Vue的小白都会纠结这个问题,但是实际上我想给这些小白同学说,不用纠结,计算属性和侦听器咋一看上去使用方式,结果都差不多,但是理解了他们深层次的原理之后你就会发现,他们其实是用在...
  • computed:通过属性计算而得来的属性  1、computed内部的函数在调用时不加()。即vm.属性名,如vm.reversedMessage 2、computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,...
  • computed :支持缓存,只有依赖数据发生改变,才会重新进行计算不支持异步,当computed内有异步操作时无效,无法监听数据的变化 3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,771
精华内容 17,508
关键字:

计算属性和watch的区别