Vue中的watch与computed

https://www.cnblogs.com/gunelark/p/8492468.html

watch可以监控data中定义的

1.整个对象

2.单个变量

 

 

 3.对象中的某个元素（加引号）

 

 

 

---

 

 

•  放在computed：
  • 　　只在计算的属性totalMarks所依赖的值results变化的时候重新计算，除此以外调用totalMarks的时候立刻返回缓存的值
• 　　放在methods：
• 　　模板{{ totalMarks() }}
• 多次访问totalMark计算属性多次执行函数，性能大大下降
• 每当触发重新渲染时，方法的调用方式将总是再次执行函数。因此，函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。

 

 

 

watch

监控变量

 

 更好的解决办法：computed

监控依赖项

 之后尝试用代码：

<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name: ''
        },
        value: ''
      };
    },
    computed: {
      newName() {
        return this.demo.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
      }
    }
  };
</script>