原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
关于Vue中的计算属性和监听属性详解
目录一、computed计算属性（1）计算属性的缓存（2）计算属性的setter二、watch监听属性
一、computed计算属性
Vue.js模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的，在模板内放入过长的或复杂的逻辑时，会让模板过重且难以维护。Vue.js框架提倡使用计算属性，在一个计算属性可以完成各种复杂的逻辑，包括逻辑运算、函数调用等，只要最终返回一个结果就可以。在Vue.js框架中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算后的结果。
计算属性使用示例：
!DOCTYPEhtml
htmllang=en
head
metacharset=UTF-8
metahttp-equiv=X-UA-Compatiblecontent=IE=edge
metaname=viewportcontent=width=device-width,initial-scale=1.0
titleDocument/title
scriptsrc=../../vue-2.7.14.js/script
/head
body
divid=root
p原字符串：{{msg}}/p
p反转字符串：{{reverseMsg}}/p
/div
script
varvm=newVue({
el:#root,
data:{
msg:Hello,computed!,
computed:{
//计算属性的getter函数
reverseMsg:function(){
returnthis.msg.split().reverse().join();
/script
/body
/html
执行结果：
开发人员可以在模板中像绑定普通属性一样绑定计算属性，计算属性自动监听依赖值的变化，当其依赖属性的值发生变化时，计算属性的值会自动更新，与之相关的DOM部分也会同步更新。
（1）计算属性的缓存
从Vue.js0.12.11版本开始，默认提供了缓存开关，可以在计算属性对象中指定cache字段来控制释放开启缓存，代码如下：
computed:{
//关闭缓存，默认为true
cache:true,
//计算属性的getter函数
reverseMsg:function(){
returnthis.msg.split().reverse().join();
}
上述代码中，设置cache为false关闭缓存之后，每次访问计算属性reverseMsg时都会重新执行getter方法
（2）计算属性的setter
每个计算属性都包含一个getter和setter，上面的例子都是计算属性默认用法，只是利用了getter来读取，在开发人员需要时，也可以提供一个setter函数，手动修改计算属性就像修改一个普通属性那样，就会触发setter函数，执行一些自定义的操作。
计算属性setter示例
!DOCTYPEhtml
htmllang=en
head
metacharset=UTF-8
metahttp-equiv=X-UA-Compatiblecontent=IE=edge
metaname=viewportcontent=width=device-width,initial-scale=1.0
titleDocument/title
scriptsrc=../../vue-2.7.14.js/script
/head
body
divid=root
姓名：{{fullName}}
/div
script
constvm=newVue({
el:#root,
data:{
firstName:Emily,
lastName:Ford
computed:{
fullName:{
get:function(){
returnthis.firstName++this.lastName;
set:function(){
varname=newValue.spli
文档评论（0）