首页 / VUE / Vue 计算属性 和侦听器
Vue 计算属性 和侦听器
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue 计算属性 和侦听器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4874字，纯文字阅读大概需要7分钟。
内容图文
在模板内使用 表达式非常便利，但是这个目的是进行简单的运算。如果在模板中进行复杂的逻辑会让模板过重，且难以维护。
<
div
id
="example"
>
{{ message.split(‘‘).reverse().join(‘‘) }}
</
div
>
对于任何复杂的逻辑，应当使用 计算属性。
#基础例子
<
div
id
="example"
>
<
p
>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></div>
var vm = new Vue({
el: ‘#example‘,
data: {
message: ‘Hello‘
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例returnthis.message.split(‘‘).reverse().join(‘‘)
}
}
})
通过上面的例子，可以看出：
1、计算属性是 是定义在 computed 属性中的。类似于：
var vm = new Vue({
//其他选项computed:{
computed_ property:funtion(){ }
}
})
2、通过Vue的API文档，我看看computed的 解释：
#computed
类型：{ [key: string]: Function | { get: Function, set: Function } }
解释：(1)、computed的类型，首先是个 object ---> ‘{}‘，
（2）、在computed中，可以 key 为 String 类型的 function 函数，或者定义一个包含 get 函数 及 set 函数 的 object 类。
（3）、这个key，是可以看做是函数名，同样也是属性名。
例子：
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅设置一个函数
// 仅读取
aDouble: function () {
returnthis.a * 2
},
//设置一个object，默认是有的get函数的（getter）， 也可以再新添一个set函数（setter）
// 读取和设置 aPlus: {
get: function () {
returnthis.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
3、计算属性的使用，接上面的例子。
//调用 计算属性，跟正常调用属性的方式相同
//不要被计算属性 的方法搞蒙，搞成方法调用了。
vm.aPlus // => 2
//计算属性 赋值，跟正常的属性赋值的方式相同，
//不要被 计算属性的 方法搞蒙，考虑成方法调用了。
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
#计算属性的缓存特点及计算属性与方法的区别
1、计算属性与方法的区别
<
p
>Reversed message: "{{ reversedMessage() }}"</p>
//
在组件中
methods: {
reversedMessage:
function
() {
return
this.message.split(‘‘).reverse().join(‘‘)
}
}
上例中：
1、在 p元素的 {{}} 中，我们使用 reversedMessage() ,这是一个方法调用。
2、这种方式跟 计算属性的调用 reversedMessage ，区别是什么呢？ 一看就是，Vue将 计算属性 reversedMessage 作为属性 对待，直接使用属性的方式调用。
问题是，两者都能实现相同的作用，那两者的区别是什么？
（1）、计算属性是基于它们的响应式依赖进行缓存的，只在相关的响应式依赖发生改变时它们才会重新求职。这就意味着，只要message还没发生改变，多次访问reversedMessage 计算属性会立即返回之前的计算结果，而不必在执行函数。
（2）、相比，reversedMessage() 方法（函数），是该函数每次触发（比如重新页面刷新加载、其他位置调用），该方法将总会再次执行函数。
相比，计算属性的优势在于 缓存，当有响应式依赖，并需要大量复杂计算的时候，一次计算的 结果需要多次使用时，应当使用 计算属性来完成复杂的函数运算，这样在 多次使用的时候，就能避免 计算资源的浪费。
但是，如果不是有响应式依赖，或者不需要缓存的时候，同样可以使用方法来实现 运算需要。
这里还要在回答一个问题：什么是响应式依赖？
简单理解（错误之处，还请各位笔友在评论区指点），就是加入到Vue实例里 data 选项中的 property （说是属性也很尴尬，data中是类似与key：value 的键值对）。
又或者是依赖于其他 计算属性，而被依赖的计算属性，最终 也应该依赖于 data选中的property（具有响应式），否则就不是。
例如：
computed: {
now:
function
() {
return
Date.now()
}
}
在一次加载计算后，now的值将 恒定（因为一次计算后，结果将会缓存，而不再触发函数运算），如果在想修改 now的值，就必须修改 now 依赖的 Date.now() 的值，但是，Date.now() 不是响应式依赖，原因是 它 没有到 Vue实例 data 选项中。
这里最明显就是，定义成函数：
methods: {
now:
function
() {
return
Date.now()
}
}
在每次调用函数的时候，这个总能获取当前时间。
<!
DOCTYPE html
>
<
html
>
<
head
>
<
title
>计算属性与方法</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><!--挂在点--><div id="app"><p>当前员工:</p><p>姓名:{{name}}</p><p>年龄:{{age}}</p><p>性别:{{sex}}</p><p>技能:{{skill}}</p><p>工资:{{gz}}</p><p>年工资增量:{{m_n_z_l}}</p><p>-----------一下是计算属性---------------</p><p>年工资是:{{one_year_gz}}</p><p>通过计算属性获取的年工资增量:{{mei_nian_gong_zi_zeng_jia_liang}}</p><p>通过计算属性获取的 ,第5年的工资额度:{{fifth_year_gz}}</p></div><script>var vm =new Vue({
el:"#app",
data:{
name:‘lilei‘,
age:20,
sex:"man",
skill:"开车",
gz:1000,
m_n_z_l:100
},
methods:{
skill_add:function (a,b) {
console.log(‘计算 a,b的和‘,a+b)
return (a+b)
},
skill_jian:function (a,b) {
// body... console.log(‘计算 a-b的差‘,a-b)
return (a-b)
},
now:function(){
console.log(‘当前时间是:‘,Date.now())
return Date.now()
}
},
// 获取数据 computed:{
// 计算属性// 一年的收入 one_year_gz:function(){
// 计算出当前一年的说如// 这里要注意,调用自身属性值的时候 ,使用this,指代 Vue的实例,vm console.log(‘年收入是‘,this.gz*12)
returnthis.gz*12
},
// 十年的工资就没必要了// 当月工资改变的时候,one_year_gz也会改变// 另外一种方式// 设想:通过计算属性 修改关联的 data选项中的值 mei_nian_gong_zi_zeng_jia_liang:{
// 定义这个值 get:function(){
console.log(‘获取每年的工资增加量‘,this.m_n_z_l)
// get 是有返回值的returnthis.m_n_z_l
},
// 修改每年工资增加量 set:function(v){
// 这里只做修改,没有返回值 console.log(‘每年工资增加量更改为:‘,v)
this.m_n_z_l = v
}
},
// 考虑工资增量后,第5年的工资是: fifth_year_gz:function(){
//考虑增量后,第5年的工资// 每年都增100,与每年增10%,完全不一样的.var fifth_gz =1000+this.m_n_z_l*5
console.log(‘考虑增量后,第5年的工资:‘,fifth_gz)
return fifth_gz
},
//区别方法的同名函数 computed_now:function(){
console.log(‘当前时间是:‘,Date.now())
return Date.now()
}
}
})
</script></body></html>
年收入是 12000
cvm.html:73 获取每年的工资增加量 100
cvm.html:93 考虑增量后,第5年的工资: 1500
vm.computed_now
cvm.html:99 当前时间是: 1612847980241
1612847980243
vm.computed_now
1612847980243
vm.computed_now
1612847980243
vm.computed_now
1612847980243
vm.computed_now
1612847980243
vm.computed_now
1612847980243
vm.now()
cvm.html:47 当前时间是: 1612847994724
1612847994725
vm.now()
cvm.html:47 当前时间是: 1612847996623
1612847996623
原文：https://www.cnblogs.com/bdxily/p/14389696.html
内容总结
以上是互联网集市为您收集整理的Vue 计算属性 和侦听器全部内容，希望文章能够帮你解决Vue 计算属性 和侦听器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。