watch 和computed 区别

之前写过一篇关于computed计算属性的文章，详见这里。

computed内的function只执行一次，仅当function内涉及到Vue实例绑定的data的值的改变，function才会从新执行，

并修改DOM上的内容。

在官方文档中，强调了computed区别于method最重要的两点

computed是属性调用，而methods是函数调用

computed带有缓存功能，而methods不是

computed定义的方法我们是以属性访问的形式调用的，{{computedTest}}
但是methods定义的方法，我们必须要加上()来调用，如{{methodTest()}}

computed计算属性可以缓存当前的计算结果，当属性再次发生改变时才会再次进行计算，性能优于methods

watch属性用来监听Vue实例上的属性变化

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }
})

watch可以用来监听input输入框值得变化，当v-model绑定的 question 发生改变时watch里面的方法就会执行，

此方法中可以进行一些操作。

分享下实际项目中遇到的问题，问题来源于一个bug

机构类型选择线路时，主账号，登录密码，确认密码输入框会隐藏，
就是说当用户先将机构类型选为机构，同时填写必填项后，未提交，将机构类型换为线路，
此时，主账号及密码框隐藏，而页面上v-model绑定已经获取到输入框中的内容，

此时再点击确定，会提示两次输入密码不一致

提交的逻辑是别人写好的，判断了两次密码是否一致，所以没有更改业务逻辑，单纯的使用计算
属性和watch监听来处理

        <!-- 选择机构类型 代码 -->
        <el-col :span="12">
          <el-form-item label="机构类型" :label-width="formLabelWidth" prop="deptType">
            <el-select v-model="form.deptType" placeholder="" style="width: 100%">
              <el-option
               v-for="item in deptTypeOption"
               :key="item.value"
               :label="item.label"
               :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

      <!-- 密码输入框 代码 -->
      <el-row>
        <el-col :span="12" v-if="form.deptType!=deptTypeOption[1].value">
          <el-form-item label="登录密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.deptType!=deptTypeOption[1].value">
          <el-form-item label="确认密码" :label-width="formLabelWidth" prop="confirmPwd">
            <el-input v-model="form.confirmPwd" type="password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

data() {
    return {
        form: {
            password: '',
            confirmPwd: '',
            deptType: ''
        }
    }
},
watch: {
    formdeptType() {
      this.form.password = ''
      this.form.confirmPwd = ''
    }
  },
  computed: {
    formdeptType() {
      return this.form.deptType
    }
  },

form为一个对象，如果要监听form对象中deptType属性的变化，则需要与computed属性配合使用。

computed 可以返回你想要监听的属性值，watch 可以用来监听。

watch 和computed 区别

猜你喜欢