之前写过一篇关于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 可以用来监听。