【Vue】计算属性与侦听器

最新推荐文章于 2024-08-02 15:55:58 发布

changyme

最新推荐文章于 2024-08-02 15:55:58 发布

阅读量86

点赞数

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/changyme/article/details/119960443

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

计算属性与监听器

计算属性

模板内尽量使用简单的表达式，而不要做复杂的函数转换。

对于任何复杂逻辑，都可以使用计算属性实现。

<div id="example">
    <p>
        Original message:"{{message}}"
    </p>
    <p>
        Computed reversed message:"{{reversedMassage()}}"
    </p>
</div>
var vm =new Vue({
	el:"#example",
	data:{
		message:"hello"
},
	computed:{
		reversedMassage=function(){
			return this.message.split('').reverse().join('');
}
}
})

计算属性缓存

计算属性是基于它们的响应式依赖进行缓存的，只要相关的变量没有被重新赋值，那么计算属性也不会更新。

计算属性的setter

计算属性默认只有getter，在需要时可以提供一个setter

computed:{
	fullName:{
		get:function(){
			return this.firstName+''+this.lastName
		},
		set:function(newVal){
			var names=newVal.split('')
			this.firstName=names[0]
			this.lastName=names[names.length-1]
		}
	}
}

这时，更改全名时会调用setter，first和last都会更新。

侦听器watch
所谓侦听器，就是当数据发生变化时，及时做出相应处理。

因此，vue提供watch选项响应数据变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式时最有用的。

<body>
  <div id="app">
    <input type="text" v-model="message">
    <h2>状态：{{ state }}</h2>
  </div>
</body>
let vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    state: '【未修改】'
  },
  
  watch: {//监听属性
  
    // 绑定监听数据
    message: function (e){
      // 当数据修改时做出响应(处理函数)
      this.state = '【已修改😀】'
      // ...
    }
  }
})

并且，watch的监听是及时的。即使在watch内部修改监听对象的值，也会立即触发监听。

changyme

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】计算属性与侦听器

计算属性与监听器计算属性模板内尽量使用简单的表达式，而不要做复杂的函数转换。对于任何复杂逻辑，都可以使用计算属性实现。<div id="example"> <p> Original message:"{{message}}" </p> <p> Computed reversed message:"{{reversedMassage()}}" </p></div>
复制链接

扫一扫