Vue中watch和computed区别使用场景

转载：https://mp.weixin.qq.com/s/_S7xrBSQZ068Jq_cSMKdLw

项目中，有很多可以巧用watch与computed的场景。

今天就来介绍下vue 中watch及computed区别及使用场景

1、区别

watch中的函数是不需要调用的

computed内部的函数调用的时候不需要加()

watch 属性监听，监听属性的变化

computed: 计算属性通过属性计算而得来的属性

watch需要在数据变化时执行异步或开销较大的操作时使用

对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性computed。

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

computed中的函数必须用return返回最终的结果

当computed中的函数所依赖的属性如果没有发生改变的时候那么调用当前函数的时候结果会从缓存中读取

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

2、使用场景

computed

当一个属性受多个属性影响的时候就需要用到computed

最典型的例子：购物车商品结算的时候

watch

当一条数据影响多条数据的时候就需要用watch

例子：搜索数据

或者，当一个值改变后，需要做相同的操作时

例子：数据添加，修改，删除后, 列表的值都将改变，值改变后，相做某些统一操作时，即可以使用watch来进行监视，统一处理

el-input输入框实现模糊搜索，computed计算属性和watch区别以及各自的使用

https://mp.weixin.qq.com/s/oRSisaKoKcGq49Hn_31GEA

<template>
  <div>
  <!-- 对表格中的姓名模糊搜索 -->
    <el-input v-model="searchVal" @input="inputSearch" placeholder="请输入姓名进行搜索"></el-input>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchVal: '',
      //表格原数据
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小明',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小路',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        //用于搜索查询的表格数据
        searchTableData:[{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小明',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小路',
          address: '上海市普陀区金沙江路 1516 弄'
        }]//用来搜索的表格数据
    }
  },
  methods:{
    //模拟接口获取数据
    getData(){
      let params = {
        projectId: '9999'
      }
      this.$get(this.$api.test(),params).then(res=>{
        if (res.code !== 200) {
          return this.$message.error(`${res.msg} `)
        }
        //在这里拿到原始数据后，进行赋值
        this.tableData = res.records || []
        //表格搜索
        this.searchTableData = res.records || []
      })
    },
    //根据姓名进行搜索
    inputSearch(){
      const search = this.searchVal.trim()
      //切记：搜索时，不能直接用原始tableData去过滤，因为会改变原始数据结构，
      // 所以我们应该创建一个新的数组，用来存储原始数据，专门对姓名进行过滤
      //之后将过滤出来的数据进行赋值，实现模糊搜索功能
        this.tableData=this.searchTableData.filter(item=>item.name.indexOf(search)>-1)
    }
  }
}
</script>

<template>
  <div id="app">
   <!-- 输入框 -->
   <el-input type="text" v-model="value" placeholder="请输入姓名/年龄"></el-input>
   <!-- 给table表格赋值 -->
   <el-table
    :data="tableDataA"
    border
    style="width: 100%">
    <el-table-column
      prop="age"
      label="年龄"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      >
    </el-table-column>
    </el-table>
  </div>
 </template>
 <script>
export default{
  data() {
   return {
    value: '',
    tableData: [
      { name: '张三', age: '18' },
      { name: '张四', age: '17' },
      { name: '张五', age: '17' },
      { name: '老六', age: '18' },
      { name: '老八', age: '18' },
      { name: '小三', age: '19' },
      { name: 'Xingyue', age: '18' },
     ],
    //表格B用原表格的数据
    tableDataB: [
      { name: '张三', age: '18' },
      { name: '张四', age: '17' },
      { name: '张五', age: '17' },
      { name: '老六', age: '18' },
      { name: '老八', age: '18' },
      { name: '小三', age: '19' },
      { name: 'Xingyue', age: '18' },
     ],
    };
   },
   //使用计算属性
   computed:{
      tableDataA(){
            // 返回过滤后的数组
            return this.tableDataB.filter((p)=>{
              return p.name.indexOf(this.value) !==-1 || p.age.indexOf(this.value) !==-1
            })
          }
        }
 }
</script>

第三种：使用watch属性进行监听，对数据过滤

<el-form>
   <el-row>
     <el-col :span="24" style="display:flex;justify-content:flex-end;">
       <span><i>当前价税合计：</i>{{Total}}</span>
     </el-col>
   </el-row>
 </el-form>

computed:{
    Total(){
      let price = 0;
      for (let i = 0;i<this.tableData.length;i++) {
        price += this.tableData[i].taxUnitPrice * this.tableData[i].invNum
      }
      this.detailedSend.total = price
      return price;
    },
  },

computed、methods、watch的区别？

https://mp.weixin.qq.com/s/0DYMmlE6UaXQI9c3yyoBlA

<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      num1: 5,
      num2: 10,
      nums: 15,
    };
  },
  computed: {
    addNum: function () {
      return Number(this.nums) + Number(this.num1) + Number(this.num2);
    },
  },
  mounted() {
    console.log(this.addNum);// 30
  },
};
</script>

<template>
  <div>
    <el-button @click="addOn">点击</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addOn() {
      this.count++;
      console.log(this.count);
    },
  },
};
</script>

<template>
  <div>
    <el-input v-model="inputValue"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "yuanshi",
    };
  },
  watch: {
    inputValue: "methOn",
  },
  methods: {
    methOn() {
      console.log(111);
    },
  },
};
</script>

addOn:{}

addOn(){}