Vue.js中computed与methods的区别-优快云博客

Vuejs中关于computed、methods、watch的区别。

1#computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

2#methods：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

3#watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

通俗来讲：

computed是在HTML DOM加载后马上执行的，
如赋值；而methods则必须要有一定的触发条件才能执行，如点击事件；
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

监听滚动事件实现动态锚点

借鉴：http://www.cnblogs.com/wisewrong/p/6495726.html

父组件（表单）

let scrolled = document.documentElement.scrollTop || document.body.scrollTop;

if (scrolled >= 1960) {
      this.steps.active = 5;
    } else if (scrolled < 1960 && scrolled >= 1660) {
      this.steps.active = 4;
    } else if (scrolled < 1660 && scrolled >= 1260) {
      this.steps.active = 3;
    } else if (scrolled < 1260 && scrolled >= 960) {
      this.steps.active = 2;
    } else if (scrolled < 960 && scrolled >= 560) {
      this.steps.active = 1;
    } else {
      this.steps.active = 0;
    }

获取到页面顶部的距离，并且比较到各个锚点的距离，选择active的数值，随着滚动，锚点变化。

子组件（steps步骤条）

elment样式设置一个step步骤条,设置点击事件jump（index）。

获取到窗口顶部的距离，通过将总距离换成好多段，每隔10ms一跳，视觉感官是平滑滚动。

jump (index) {
      // 用 class="d_jump" 添加锚点
      let jump = document.querySelectorAll(".d_jump");
      let total = jump[index].offsetTop;
      console.log("纵坐标", total);
      let distance = document.documentElement.scrollTop || document.body.scrollTop;
      // 平滑滚动，时长500ms，每10ms一跳，共50跳
      let step = total / 50;
      if (total > distance) {
        smoothDown();
      } else {
        let newTotal = distance - total + 100;
        step = newTotal / 50;
        smoothUp();
      }
      function smoothDown () {
        if (distance < total) {
          distance += step;
          // Firefox
          document.documentElement.scrollTop = distance;
          // Chrome
          document.body.scrollTop = distance;
          setTimeout(smoothDown, 10);
        } else {
          document.documentElement.scrollTop = total;
          document.body.scrollTop = total;
          window.pageYOffset = total;
        }
      }
      function smoothUp () {
        if (distance > total) {
          distance -= step;
          // Firefox
          document.documentElement.scrollTop = distance;
          // Chrome
          document.body.scrollTop = distance;
          setTimeout(smoothUp, 10);
        } else {
          document.documentElement.scrollTop = total;
          document.body.scrollTop = total;
          window.pageYOffset = total;
        }
      }
    }