Vue计算属性和侦听器

volunteer1024

于 2019-11-14 22:07:45 发布

阅读量84

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/volunteer1024/article/details/103075365

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

计算属性和侦听器

计算属性
- 计算属性缓存 vs 方法
- 计算属性 vs 侦听属性
侦听器

计算属性

对于任何复杂逻辑，你都应当使用计算属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='app'>
			<p>{{message}}</p>
			<p>reverseMessage: {{reverseMessage}}</p>
		</div>
		<script>
			data = {message : '基本信息'}
			var vm = new Vue({
				el: '#app',
				data: data,
				computed:{
					reverseMessage: function(){
						return this.message.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。

计算属性缓存 vs 方法

我们可以将同一函数定义为一个方法而不是一个计算属性。
methods在html中带()，如{{changemessage()}}

// 定义在方法中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

例如，获取一个时间，放在计算属性中，除非有改动，否则不会自动更新

computed: {
  now: function () {
    return Date.now()
  }
}

我们为什么需要缓存？
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
然后我们可能有其他的计算属性依赖于 A 。
如果没有缓存，我们将不可避免的多次执行 A 的 getter！
如果你不希望有缓存，请用方法来替代。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='app'>
			<p>{{message}}</p>
			<p>time_methods: {{changetime()}}</p>
			<p>time_computed: {{time_computed}}</p>
			<button v-on:click="logs += 1">{{logs}}</button>
		</div>
		<script>
			data = {message : '基本信息', logs: 1}
			var vm = new Vue({
				el: '#app',
				data: data,
				methods:{
					changetime: function(){
						return Date.now()
					}
				},
				computed:{
					time_computed: function(){
						return Date.now()
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

计算属性 vs 侦听属性

更好的做法是使用计算属性而不是命令式的 watch

侦听器

volunteer1024

关注

0
点赞
踩
0

收藏

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

计算属性和侦听器计算属性计算属性缓存 vs 方法计算属性 vs 侦听属性侦听器计算属性对于任何复杂逻辑，你都应当使用计算属性。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue...
复制链接

扫一扫