Vue 计算属性 和侦听器
作者：互联网
在模板内使用 表达式非常便利，但是这个目的是进行简单的运算。如果在模板中进行复杂的逻辑会让模板过重，且难以维护。
<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 实例
return this.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 () {
return this.a * 2
},
//设置一个object，默认是有的get函数的（getter）， 也可以再新添一个set函数（setter）
// 读取和设置
aPlus: {
get: function () {
return this.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)
return this.gz*12
},
// 十年的工资就没必要了
// 当月工资改变的时候,one_year_gz也会改变
// 另外一种方式
// 设想:通过计算属性 修改关联的 data选项中的值
mei_nian_gong_zi_zeng_jia_liang:{
// 定义这个值
get:function(){
console.log('获取每年的工资增加量',this.m_n_z_l)
// get 是有返回值的
return this.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
标签：function,Vue,computed,vm,侦听器,计算,now,属性 来源： https://www.cnblogs.com/bdxily/p/14389696.html