对于复杂逻辑 Vue提供了计算属性 注: 例子: 计算属性其本质就是一个方法: 使用 watch侦听属性不仅能监视数据的改变 还能获取到改变前后的数据的值 而且 watch不仅能监视数据的改变 还能监视路由地址的变化: 这三者虽都是function 但在computed的内部 无论如何都要return出一个值 这三个属性并无孰优孰劣 根据不同的业务场合选择使用
1、computed计算属性
在Vue实例的computed
属性中 可定义一些计算属性 其本质就是一个方法
只不过在使用这些计算属性的时候 是将它们的名称直接当作属性使用 而不是当作方法去调用
直接当作普通的属性去使用即可
如 例子中的<input type="text" v-model="result">
是v-model=“result” 而不是v-model=“result()”
即 在页面中若多个地方使用该结果 那么只会调用一次 不会每次用的时候都调用计算方法 此举提高了运行的效率
若计算属性方法所依赖的所有数据都没发生变化 则不会重新计算求值<div id="app"> <input type="text" v-model="arg1"> + <input type="text" v-model="arg2"> = <input type="text" v-model="result"> </div>
<script> var vm=new Vue({ el:'#app', data:{ arg1:"", arg2:"" }, methods:{}, computed:{ "result":function() { return parseInt(this.arg1)+parseInt(this.arg2) } } }); </script>
2、watch侦听属性
watch
侦听属性可以监视data数据的变化
当指定的数据发生变化 会立即触发watch中对应的处理函数:<div id="app"> <input type="text" v-model="myinput"> </div>
<script> var vm=new Vue({ el:'#app', data:{ myinput:"" }, methods:{}, // 使用watch属性可以监视data中指定数据的变化并触发watch中对应的处理函数 watch:{ "myinput":function() { console.log("change!") } } }); </script>
往方法里定义两个参数即可 第一个参数是修改后的数据的值 第二个参数是修改前的数据的值<script> var vm=new Vue({ el:'#app', data:{ myinput:"" }, methods:{}, // 使用watch属性可以监视data中指定数据的变化并触发watch中对应的处理函数 watch:{ "myinput":function(newVal,oldVal) { console.log(newVal+" "+oldVal) } } }); </script>
由于路由地址是存放在$route的path属性里的 因此只要监视$route的path值是否变动即可<script> var vm=new Vue({ el:'#app', data:{}, methods:{}, // 挂载路由对象 router, // 监视路由地址的变化 watch:{ "$route.path":function(newVal,oldVal) { console.log(newVal+" "+oldVal) } } }); </script>
watch 和 computed 和 methods的对比:
methods更加侧重于业务逻辑的处理 而computed适合做一些简单的数据操作
computed
属性的结果会被缓存 除非所依赖的响应式属性发生变化 才会重新计算
主要作为复杂逻辑的属性来使用methods
方法表示一个具体的操作 主要用于书写业务逻辑watch
是一个对象 键是需要观察的表达式 值是对应的回调函数
主要用来监听某些特定数据的变化 从而进行某些具体的业务逻辑操作
可以看作是computed
和methods
的结合体
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算