Vue中computed和watch属性的区别

作者: 蓝海00 | 来源:发表于2019-07-06 11:44 被阅读20次
    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实现搜索和排序

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

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <input type="text" v-model="name" placeholder="搜索姓名" /> <br />
          <ul>
            <li v-for="(item, index) in fillNameList" :key="index">
              {{ index }} -- {{ item.name }} -- {{ item.age }}
            </li>
          </ul>
          <button @click="sorting=1">年龄升序</button>
          <button @click="sorting=2">年龄降序</button>
          <button @click="sorting=0">原本顺序</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
          const vm = new Vue({
            el: "#app",
            data: {
              name: "",
              nameList: [
                { name: "Tom", age: 18 },
                { name: "Bob", age: 19 },
                { name: "Rose", age: 17 },
                { name: "Bem", age: 20 }
              ],
              // 排序
              sorting: 0 // 0 原本顺序 , 1 升序 , 2 降序
            },
            computed: {
              fillNameList: {
                get() {
                  const { nameList, name, sorting } = this;
                  // 新数组
                  let fillList = nameList.filter(
                    val => val.name.indexOf(name) != -1
                  );
                  // 排序
                  if (sorting !== 0) {
                    fillList.sort((a, b) => {
                      // 如果返回负数 a在前(降序) 如果返回正数 b在前(升序)
                      // 升序
                      if (sorting === 1) {
                        return b.age - a.age;
                      }
                      // 降序
                      if (sorting === 2) {
                        return a.age - b.age;
                      }
                    });
                  }
                  return fillList;
                }
              }
            }
          });
        </script>
      </body>
    </html>
    

    相关文章

      网友评论

        本文标题:Vue中computed和watch属性的区别

        本文链接:https://www.haomeiwen.com/subject/kgqphctx.html