摘要：我们可以改写这个例子计算属性的指向实例我们可以将同一函数定义为一个方法而不是一个计算属性。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。这就意味着只要还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
对于很多初学vue的初级前端开发工程而言，在了解了vue双向数据绑定v-model、模板语法、实例创建等基础的知识之后，对于一些复杂的数据操作还无从下手。
首先，什么是计算属性？
在vue官方文档中，对计算属性的初衷是由于模板内部的表达式虽然已经很便利，但是它只能进行简单的运算，而且面对复杂逻辑的时候，模板过重并且难以维护，所以官方给的建议是对于任何复杂的逻辑都应当使用计算属性。
那么，我们为什么要使用计算属性呢？它到底有什么好处，可以给我们带来哪些便利呢？
我们一起来看下以下代码
{{ message.split("").reverse().join("") }}var vm = new Vue({ el: "#example", data: { message: "Hello" } })
对于初学着来说，如果要拆分对message进行处理或者其他的复杂操作，我们可能会想到上面这种形式去处理，但是如果说，要实行for循环呢？
有人会说，我可以在`methods: {
reversedMessage: function () {
return this.message.split("").reverse().join("")
}
}`
这样写，
但是，如果我需要这个message动态的去改变呢？
为了适应复杂的业务逻辑，计算属性cumputed就横空出世了，虽然cumputed和methods可以完成同样的事情，但是copmputed是基于依赖进行缓存的，然而methods需要每一次的去进行计算。
我们可以改写这个例子
var app = new Vue({ el: "#app", data: { message: "Hello" }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 app 实例 return this.message.split("").reverse().join("") } } }){{ reversedMessage}}"
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。此时你可以动态的去修改message的值，可以动态的看到reversedMessage再动态的更新。
其次：计算属性是没有setter的，默认的情况下只有getter
不过你可以添加一个setter进去。
例子：
{{ allName }}// 用computed实现 var vm = new Vue({ el: "#app", data: { her: "尼古拉斯赵四", he: "刘英" }, computed: { allName: function () { get: function () { return this.her+ " 的女儿是" + this.lastName }, // setter set: function (newValue) { var names = newValue.split(" ") this.her= names[0] this.he= names[names.length - 1] } } } })
现在运行vm.allName时，setter也会执行，vm.her和vm.she也会被更新
Watch
虽然计算属性很强大，但是面对复杂的业务需求和奇特的产品经理（虽然很多时候你都想狠狠地胖揍他一顿）的时候，我们也需要一个自定义的侦听器去检测数据的动态变化，当数据进行异步或者数据的开销比较庞大的时候，这个时候watch就显得比较有用了
`
点击次数:{{num}}
var vm = new Vue({
el: "#app",
data: {
num: 10
},
watch: {
// 监听数据的变化做出对应的改变，并不会生成新的属性
num (val) {
if (val< 5) this.alert()
}
},
methods: {
alert () {
alert("点击次数达到"+this.number+"次啦")
},
add () {
this.number -= 1
}
}
})`
当你点击的时候执行add方法，改变num的值，而watch正在监听num的变化，此时当num<5时,即刻执行alert方法，点击次数到达了4次啦。
在我们需要依赖动态的去改变data的值之后进行逻辑其他逻辑操作的时候以及我们需要监听数据结构层次比较高的时候可以使用deep属性进行深度监听。
好了，喜欢的朋友请关注下方公众号，每天不定期更新更多前沿前端技术内容。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114763.html
摘要：我们可以改写这个例子计算属性的指向实例我们可以将同一函数定义为一个方法而不是一个计算属性。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。这就意味着只要还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。 对于很多初学vue的初级前端开发工程而言，在了解了vue双向数据绑定v-model、模板语法、实例创建等基础的知识之后，对于一些复杂的数据操作还无从...
摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当某个属性发生变化，触发拦截函数，然后调用自身消息订阅器的方法，遍历当前中保存着所有订阅者的数组，并逐个调用的方法，完成响应更新。 虽然目前的技术栈已由Vue转到了React，但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的，Vue文档清晰规范，api设计简洁高效，对前端开发人员友好，上手快，甚至个人认为在很多...
摘要：当某个属性发生变化，触发拦截函数，然后调用自身消息订阅器的方法，遍历当前中保存着所有订阅者的数组，并逐个调用的方法，完成响应更新。 编者按：我们会不时邀请工程师谈谈有意思的技术细节，希望知其所以然能让大家在面试有更出色表现。也给面试官提供更多思路。 showImg(https://segmentfault.com/img/bVbgYyU?w=1200&h=600); 虽然目前的技术...
阅读 2194·2021-09-22 15:25
阅读 3590·2019-08-30 12:48
阅读 2154·2019-08-30 11:25
阅读 2306·2019-08-30 11:05
阅读 704·2019-08-29 17:28
阅读 3265·2019-08-26 12:16
阅读 2577·2019-08-26 11:31
阅读 1627·2019-08-23 17:08
