Vue中computed和watch属性的区别

Vue结合computed实现搜索和排序Demo效果图

一、什么是computed计算属性?

1.1 computed 和 watch 的区别 和 使用场景

1.1.1 computed 计算属性

• 可以在里面声明一些函数 必须有return值
• 计算属性函数中如果用到了Vue实例data中的数据 这些数据发生改变后就会重新执行这个计算属性函数 将最新的计算属性结果返回出去
• 执行时机: 初始化显示执行，函数中用到了Vue实例data中的数据发生改变后会重新执行计算
• 页面中使用计算属性: 在页面中直接用插值表达式(八字胡语法||胡子语法)使用计算属性({{计算属性函数名}})
• 本质: 计算属性本质就是一个方法 但是使用的时候这些方法的方法名当作属性名使用 计算属性的值就是方法中return出来的值
• getter 和 setter :

使用 get 和 set 函数需要把原先的计算属性函数改成计算属性对象
计算属性默认执行get方法(需要return计算属性的结果) (根据相关的数据计算并返回当前属性的值)
当计算属性值自身发生改变后执行set方法
可以用get和set方法来实现一些计算税前和税后的互推算

• 计算属性缓存: 计算属性存在缓存 多次读取计算属性的值只执行一次getter计算 缓存机制 => {计算属性名:数据结果} 以键值对的数据格式进行缓存

1.1.2 watch 监听属性

• 可以监听data中的属性和一些非DOM元素的改变
• 可以获取数据改变前的值和改变后的值 形参(newVal,oldVal)=>(改变后的值,改变前的值)
• 监听路由 hash

        watch: {
          // watch里面的 $router 这些对象前面不要带this
          "$route.path"(newVal, oldVal) {
            if (newVal.indexOf("/login") >= 0) {
              this.welcom = "欢迎登陆";
            }
            if (newVal.indexOf("/register") >= 0) {
              this.welcom = "欢迎注册";
            }
          }
        }

1.1.3 watch和computed的区别

• watch里面的方法只能对那个方法名的属性名做监听
• computed里面可以对那个方法中所有使用到了的data中的属性名做监听
• watch里面无须return
• computed需要return

一般computed比watch用的更多

---

Xmind图例

---

二、Vue结合computed实现搜索和排序

从不废话的小蓝直接上代码

  
    
    
    
    
  
  
    

       

      

        

          {{ index }} -- {{ item.name }} -- {{ item.age }}
        
      
      年龄升序
      年龄降序
      原本顺序