Vue.js入门（8）watch、computed和methods之间的区别

序言

watch、computed和methods之间的对比

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

methods方法表示一个具体的操作，主要书写业务逻辑；

watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

computed和watch的区别

计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

其他

$nextTick是什么？

$nextTick就是用来知道什么时候DOM更新完成的

vue如何获取dom

先给标签设置一个ref值，再通过this.$refs.domName获取，例如：

<div ref="test"></div>

const dom = this.$refs.test

addEventListener、removeEventListener

mounted() {
    // 注册滚动事件，在滚动的时候如果cascader打开，就关闭它
    const ele = document.getElementsByClassName('main')[0];
    if (ele) {
      ele.addEventListener('scroll', this.listenScroll, {
        passive: true,
      });
    }
  },
  beforeDestroy() {
    // 移除滚动事件监听
    const ele = document.getElementsByClassName('main')[0];
    if (ele) {
      ele.removeEventListener('scroll', this.listenScroll, {
        passive: true,
      });
    }
  },

vue中的ref和$refs

ref有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

https://www.cnblogs.com/xumqfaith/p/7743387.html

 <div class="search-form clearfix" @keydown="bindEnter($event)">

// 绑定enter事件

    bindEnter(e) {

      this.$enterSearch(e, this.search);

    }

cookie

 if (this.$cookies.get("groupId")) {

        this.$cookies.remove("groupId");

      }

 _this.$cookies.set("groupId", groupId, 31 * 24 * 60 * 60);

              _this.$cookies.set("hotelId", hotelId, 31 * 24 * 60 * 60)

 

// 保存酒店名称

            const localSrorage = window.localStorage;

            localSrorage.hotelName = hotelName;

filters

 <td>{{ item.star | format_star }}</td>

filters: {
    format_star(str) {
      switch (str) {
        case "FiveStar":
          return "五星";
          break;
        case "QuasiFiveStar":
          return "准五星";
          break;
        case "FourStar":
          return "四星";
          break;
        case "QuasiFourStar":
          return "准四星";
          break;
        case "ThreeStar":
          return "三星";
          break;
        case "QuasiThreeStar":
          return "准三星";
          break;
        case "Economical":
          return "经济型";
          break;
        default:
          return "请选择";
      }
    }

async

async function searchPermissions() {

scope

const { row } = scope;

Vue.nextTick()用于延迟执行一段代码。

vue 中的const {XXX } =this 的作用效果

样例1：
const { xxx } = this.state;
上面的写法是es6的写法，其实就相当于：

const xxx = this.state.xxx
样例2：

const {comment,index,deleteComment} = this
上面的这句话是一个简写，最终的含义相当于
const comment = this.comment
const index = this.index
const deleteComment = this.deleteComment

资料

https://www.cnblogs.com/monkeySoft/p/13301874.html