Vue学习笔记（3）关于Vue的计算属性

来源：互联网发布：h5工具是什么软件编辑：程序博客网时间：2024/05/17 03:48

通过之前的学习，我们学习了模板之中的文本插值，这可以很好的实现数据的展示与绑定，但是这样的展示是有点缺陷的，比如当你想把数据做一定的复杂处理过后才展示的时候，当然你也可以继续地使用模板，可是这会显得特别难以维护。

Vue当然也是给出了解决方案，这就是计算属性，先给出代码

<html><head><title>Vue</title><script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script></head><body><div id="app"><h1>{{message}}</h1><h2>{{reverseMessage}}</h2></div></body><script>var vm=new Vue({el:'#app',data:{message:'Hi Vue!'},computed:{reverseMessage:function(){return this.message.split(' ').reverse().join('');}}})</script></html>

在此我们利用了计算属性来对message做一个整理转换，然后再展示于页面之中，这样在网页的编写之中就显得十分的清晰了。

步骤如下，在dom中使用文本插值，然后在Vue实例中添加computed选项，并为此添加reverseMessage的函数返回值，我们为其提供的函数作为reverseMessage的getter，Vue中的开发文档中对于getter的说明是干净无副作用的，我们可以放心地使用它。

当然上面的代码还有另外一种实现方式，就是利用method来实现

<html><head><title>Vue</title><script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script></head><body><div id="app"><h1>{{message}}</h1><h2>{{reverseMessage()}}</h2></div></body><script>var vm=new Vue({el:'#app',data:{message:'Hi Vue!'},methods:{reverseMessage:function(){return this.message.split(' ').reverse().join('');}}})</script></html>

代码如上，我们可以利用文本插值之中加入一个method来实现数据的处理

但是这两种方式是不一样的，method方法在每一次重新渲染都会重新计算一次，而使用计算属性的方法会对数据进行绑定，储存在缓存之中，除非数据发生变动。如果你不希望有缓存，你可以使用method。

接下来还要介绍一个监视属性 Watched property

他可以监视数据的变动

<html><head><title>Vue</title><script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script></head><body><div id="app">The message is :<input type="text" v-model="message"></input><p>{{theReact}}</p></div></body><script>var vm=new Vue({el:'#app',data:{message:'',theReact:'',},watch:{message:function(val,oldval){this.theReact=val;}}})</script></html>

如代码所示，利用watch选项中的函数，我们可以实现对数据的监视，当其发生改变的时候就会调用相应的方法。这可以运用在一些异步访问之中。

到此，对于计算属性以及method，watch等应该有了一定的了解了。

0 0