계산에 대해 알아보고 Vue에서 시청하며 차이점에 대해 이야기해 보세요.

이 기사에서는 Vue의 계산과 감시에 대해 소개하고, 계산과 감시의 차이점을 소개하는 것이 도움이 되기를 바랍니다.

1. 계산됨

1. 목적: 계산된 속성은 계산된 속성입니다

2 계산된 속성의 이점: 다른 속성을 기반으로 계산된 일부 속성을 계산된 속성으로 바꿀 수 있습니다.

종속성 캐시

가 있습니다. 계산의 종속성 속성이 변경되지 않으면 계산이 다시 계산되지 않습니다. 데이터 조각이 다른 데이터에 의존하는 경우 계산할 데이터를 설계합니다. [관련 권장사항: "vue.js Tutorial"]예(사용자 이름 표시):

Vue.config.productionTip = false;

new Vue({
  data: {
    user: {
      email: "jade@qq.com",
      nickname: "jade",
      phone: "18810661088"
    }
  },
  computed: {
    displayName: {
      get() {
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
        console.log(value);
        this.user.nickname = value;
      }
    }
  },
  // DRY don't repeat yourself
  // 不如用 computed 来计算 displayName
  template: `
    <div>
      {{displayName}}
      <div>
      {{displayName}}
      <button @click="add">set</button>
      </div>
    </div>
  `,
  methods: {
    add() {
      console.log("add");
      this.displayName = "圆圆";
    }
  }
}).$mount("#app");

3. 종속 속성이 변경되지 않으면 getter/setter는 다시 계산되지 않으며 기본적으로 캐시되지 않습니다. Vue는 특별한 처리를 수행했습니다.

캐시하는 방법은 무엇입니까? 다음 예시를 참고하시면 됩니다.

2. watch(듣기/듣기) getter/setter默认不会做缓存，Vue做了特殊处理

如何缓存？可以参考以下示例：

二、watch(监听/侦听）

1、用途：当数据变化时，执行一个函数，watch是完美实现历史功能的一个函数（方法）

示例（撤销）：

import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    n: 0,
    history: [],
    inUndoMode: false
  },
  watch: {
    n: function(newValue, oldValue) {
      console.log(this.inUndoMode);
      if (!this.inUndoMode) {
        this.history.push({ from: oldValue, to: newValue });
      }
    }
  },
  // 不如用 computed 来计算 displayName
  template: `
    <div>
      {{n}}
      <hr />
      <button @click="add1">+1</button>
      <button @click="add2">+2</button>
      <button @click="minus1">-1</button>
      <button @click="minus2">-2</button>
      <hr/>
      <button @click="undo">撤销</button>
      <hr/>

      {{history}}
    </div>
  `,
  methods: {
    add1() {
      this.n += 1;
    },
    add2() {
      this.n += 2;
    },
    minus1() {
      this.n -= 1;
    },
    minus2() {
      this.n -= 2;
    },
    undo() {
      const last = this.history.pop();
      this.inUndoMode = true;
      console.log("ha" + this.inUndoMode);
      const old = last.from;
      this.n = old; // watch n 的函数会异步调用
      this.$nextTick(() => {
        this.inUndoMode = false;
      });
    }
  }
}).$mount("#app");

加了immediate: true ，一次渲染的时候会触发watch

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 += &#39;hi&#39;">obj.a + &#39;hi&#39;</button>
      <button @click="obj = {a:&#39;a&#39;}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler(){
        console.log("obj 变了");
      },
      deep:true
    },
    "obj.a": function() {
      console.log("obj.a 变了");
    }
  }
}).$mount("#app");

• 语法1:

上面箭头函数的外层的函数是全局作用域，全局作用域的this就是全局对象window/global,所以你无法在这里获取this.n/this.xxx,所以，watch里面是绝对不能使用箭头函数的

• 语法2:

vm.$watch('xxx',fn,{deep:...,immediate:...})

watch前面加$这样的写法是为了避免和一个叫watch的data名重复

2、deep:true是干什么的？

如果object.a变了，请问objectdeep:true如果需要答案是【没有变】，就用deep:false

deep就是往不往里面去看，去深入的看，true就是深入进入看，默认是false(只看表层的地址）。

不光要比较obj的地址，而且要比较里面任何一个数据变了，都要认为是obj变了。

三、总结

• computed:就是计算属性的意思
• watch:就是监听的意思
• watch 支持异步代码而computed不行

computed这个值在调用的时候，不需要加括号，它会根据依赖自动缓存，就是说如果依赖不变，这个computed的值就不会重新再计算。

watch它有两个选项，第一个是immediate,表示在第一次执行时要渲染这个函数；另一个是deep,意思是如果我们要监听一个对象，是否要看它里面属性的变化。

• 如果一个数据依赖于其他数据，那么把这个数据设计为computed;

• 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据的变化。

以上，就是computed和watch

1. 목적

: 데이터가 변경되면 함수를 실행하면 watch가 딱 맞습니다. 기록 함수 구현 함수(메서드)

예(실행 취소)🎜:🎜rrreee🎜 immediate: true를 추가했습니다. 렌더링 중에 시계가 트리거됩니다.🎜rrreee

• 구문 1 :

🎜🎜🎜위 화살표 함수의 외부 함수는 전역 범위이고 전역 범위의 this는 전역 개체 창/전역이므로 여기서는 this.n/this.xxx를 얻을 수 없으므로 시계는 절대적으로 화살표 함수를 사용할 수 없습니다🎜

• 구문 2:

rrreee🎜Watch라는 데이터 이름과의 중복을 피하기 위해 Watch 앞에 $가 붙습니다🎜🎜2, 무엇을 합니까? deep:true 합니까? 🎜🎜object.a가 변경되면 object도 변경된 것으로 간주되나요? 필요한 답변이 [변경됨]인 경우 deep:true를 사용하세요. 필요한 답변이 [변경되지 않음]인 경우 deep:false🎜🎜를 사용하세요. deep은 내부를 보는 것이 아니라 깊게 본다는 뜻이고, <code>true는 깊게 본다는 뜻이다. 기본값은 false(표면 주소만 본다)이다. 🎜🎜obj의 주소를 비교해야 할 뿐만 아니라, 그 안의 데이터가 변경되면 obj가 변경된 것으로 간주됩니다. 🎜

3. 요약🎜

• computed: 계산된 속성을 의미합니다
• watch
code>: 모니터링을 의미합니다.
• watch는 비동기 코드를 지원하지만 계산은 지원하지 않습니다

🎜계산 li> code> 값이 호출되면 괄호를 추가할 필요가 없습니다. 종속성에 따라 자동으로 캐시됩니다. 즉, 종속성이 변경되지 않은 경우 이 <code>계산 값이 됩니다. 다시 계산되지 않습니다. 🎜🎜watch두 가지 옵션이 있습니다. 첫 번째는 immediate입니다. 즉, 이 함수는 처음 실행될 때 렌더링되어야 하며 다른 하나는 deep code>, 이는 객체를 모니터링하려는 경우 해당 속성의 변경 사항을 확인하고 싶습니까? 🎜<ul style="list-style-type: disc;"> <li>🎜데이터가 다른 데이터에 의존하는 경우 데이터를 <code>계산;🎜

🎜특정 데이터가 변경될 때 조치를 취해야 하는 경우 watch를 사용하여 데이터의 변경 사항을 관찰하세요. 🎜

🎜위는 computed와 watch의 차이점입니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 계산에 대해 알아보고 Vue에서 시청하며 차이점에 대해 이야기해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!