Vue中computed与watch的区别

最新推荐文章于 2024-07-28 19:41:36 发布

kbvv

最新推荐文章于 2024-07-28 19:41:36 发布

阅读量109

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46842704/article/details/119060289

版权

computed

computed就是用来计算属性的，就是一个数据依赖于其他数据，那么就把这个数据设计为computed，以下是代码示例

import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;
new Vue({
  data: {
    user: {
      email: "123456789@qq.com",
      nickname: "小明",
      phone: "15935778911"
    }
  },
  computed: {
    displayName: {
      get() {
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
        console.log(value);
        this.user.nickname = value;
      }
    }
  },
  template: `
    <div>
      <div>
      {{displayName}}
      <button @click="add">set</button>
      </div>
    </div>
  `,
  methods: {
    add() {
      console.log("add");
      this.displayName = "小红";//nickname变化时，computed会计算它的属性，调用displayName，不用加括号
    }
  }
}).$mount("#app");

使用场景
适用于重新计算比较费时不用重复数据计算的环境。所有 getter和setter的this自动地绑定为Vue实例。如果一个数据依赖于其他数据，那么把这个数据设计为computed

watch

watch就是对data的数据监听回调，主要有两个选项immediate和deep，immediate用来表示是否在第一次渲染的时候执行对应的函数，deep用来表示是否要监听对象的每一个property(属性值)，无论嵌套的有多深，接下来举一个watch的例子

import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;
new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler(){
        console.log("obj变了");
      },
      deep:true//深入obj对象里面去看，不仅仅是obj的地址改变会调用，而且obj对象里面的属性一旦改变也会调用
    }
  }
}).$mount("#app");