2021-06-01

vue中的watch和$watch的用法和区别

今天给大家分享一下vue中的watch和($watch),在项目开发时候遇到了一个问题就是在编辑页面初次加载时候需要监听一个数组的变化，

但是又不想用watch来一直占用性能，于是便用到了$watch来监听之后来取消监听。

两者区别

两者都用来监听data中定义的属性的变化，但是vm.$watch 返回一个取消观察函数，用来停止触发回调：大家看代码，我简单写了一个demo

<template>
  <div class="about">
    <div class="box">我是watch组件</div>
    <el-button class="box" @click="dataArrAdd()">向数组中添加元素</el-button>
    <div class="box" v-if="showBtn">添加成功</div>
  </div>
</template>
<script>
export default {
  name: "watch",
  data() {
    return {
      dataArr: [],
      showBtn: false,
    };
  },
  //watch: {
  //  dataArr:function(newval,old) {
   //   console.log(newval);
   //     console.log(old);
  //    this.showBtn = !this.showBtn;
 //   },
  },
  created() {
    let unDataArr = this.$watch(
      () => {
        return this.dataArr;
      },
      function(newval,old)  {
        console.log(newval);
        console.log(old);
        this.showBtn = !this.showBtn;
         unDataArr();
      }
    );
  },
  methods: {
    dataArrAdd() {
      this.dataArr.push("1");
    },
  },
};

如果调用unDataArr()那么在执行一次监听事件后就会移除监听，当我们遇到类似的需求可以采用这种方式，$watch中第一个参数是监听的对象，我们可以看到这样的写法类似于监听一个未被定义的计算属性，只要return的值发生变化，函数就会调用，第二个参数是function (newVal, oldVal) {
// 做点什么
}和watch的写法一样