zoukankan      html  css  js  c++  java
  • VUE中computed与watch属性

    computed

    computed 是计算属性,它会根据你所依赖的数据动态显示新的计算结果。计算属性将被加入到 Vue 实例中,所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例通过计算出来的属性不需要调用直接可以在 DOM 里使用

    computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理

    watch

    一个对象,键是 data 对应的数据,值是对应的回调函数。值也可以是方法名,或者包含选项的对象,当 data 的数据发生变化时,就会发生一个回调,他有两个参数,一个 val (修改后的 data 数据),一个 oldVal(原来的 data 数据)

    watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象,但是我们不能监视对象的单一属性,要监听整个队形

    Vue 实例将会在实例化时调用$watch(),遍历 watch 对象的每一个属性

      • deep 控制是否要看这个对象里面的属性变化
      • immediate 控制是否在第一次渲染是执行这个函数

    总结:

    如果一个数据需要多个数据经过复杂计算就用 computed     可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新。

    如果一个数据需要被监听并且改变时需要对数据做一些操作就用 watch     一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据

    ------------恢复内容结束------------

  • 相关阅读:
    JAVA设计模式之单例模式
    JAVA设计模式之单例模式
    数据库连接池
    数据库连接池
    DbUtils操作数据库
    DbUtils操作数据库
    Hadoop 问题之 Linux服务器jps报process information unavailable
    echarts ——纵坐标赋值
    echarts ——div没有设置样式图表就展示不出来!
    Elasticsearch+spring boot(一)
  • 原文地址:https://www.cnblogs.com/hjcby/p/14183049.html
Copyright © 2011-2022 走看看