vue的核心之一就是computed属性和listen属性watch

时间：2023-03-30 18:26:39 CSS

对于很多刚接触vue的初级前端开发项目来说，在了解了vue双向数据绑定的基础知识之后，v-model，模板语法，实例创建等，对于一些复杂的数据操作，无从下手。首先，什么是计算属性？在vue的官方文档中，计算属性的初衷是，虽然模板内部的表达式很方便，但是只能进行简单的计算，面对复杂的逻辑时，模板过于繁重，难以维护，所以官方给出我的建议是对任何复杂的逻辑使用计算属性。那么，为什么我们要使用计算属性呢？它有什么好处，又能给我们带来什么便利呢？我们来看看下面的代码{{message.split('').reverse().join('')}}

varvm=newVue({el:'#example',data:{message:'Hello'}})对于初学者来说，如果我们要对消息进行拆分处理或者其他复杂的操作，可能会想到上面的形式来处理，但是如果说，实现呢一个for循环？有人会说，我可以这样写`methods:{reversedMessage:function(){returnthis.message.split('').reverse().join('')}}`，但是如果我需要这个message动态变化呢？为了适应复杂的业务逻辑，计算属性cumput应运而生。虽然cumput和methods可以完成同样的事情，但是copputed是基于依赖缓存的，但是每次都需要计算methods。我们可以重写这个例子

{{reversedMessage}}"

varapp=newVue({el:'#app',data:{message:'Hello'},computed:{//计算属性的getterreversedMessage:function(){//`this`指向应用实例returnthis.message.split('').reverse().join('')}}})我们可以将相同的函数定义为方法而不是计算属性。两种方式的最终结果确实完全相同。但是，不同之处在于计算属性是根据它们的响应依赖项进行缓存的。只有相关的响应他们当公式依赖发生变化时会重新求值，这意味着只要消息没有发生变化，多次访问reversedMessage计算属性将立即返回之前的计算结果，而无需再次执行该函数。此时你可以动态去修改message的值，可以动态看到reversedMessage，然后动态update.se遗憾的是，计算属性没有设置器。默认情况下，只有一个getter，但您可以为其添加一个setter。示例：{{allName}}

//使用computed实现varvm=newVue({el:'#app',data:{her:'NicholasZhaosi',he:'刘英'},computed:{allName:function(){get:function(){returnthis.her+'daughteris'+this.lastName},//setterset:function(newValue){varnames=newValue.split('')this.her=names[0]this.he=names[names.length-1]}}}})现在运行vm.allName时，setter也被执行了，vm.her和vm。她也会更新。虽然计算属性很强大，但是我们还需要一个自定义的监听器，用来检测数据的动态变化。当数据是异步的或者数据开销比较大的时候，watch这个时候比较有用`add

Clicks:{{num}}