VUE的计算属性与监听属性

vue计算属性

methods与computed的区别

• computed是属性调用，而methods是函数调用；
• computed带有缓存功能，而methods不是；
• 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
• 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

VUE的监听属性

• watch为VUE的监听属性，当监听的对象值改变时就会触发。

    <div id='app'>
        <input type="text" name="text" id="text" v-model="m" />
        <button type="button" @click="fn">修改m的值</button>
        <h1>{{userTime}}</h1>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                m: 111,
                userTime: "",

            },
            methods: {
                fn() {
                    this.m = 6000
                }
            },
            watch: {
                m(newdata) {
                    this.userTime = (parseInt(newdata / 1000)) + "秒"
                    console.log(this.userTime)
                },
            }
        })
    </script>

用VUE属性做前端验证

<style type="text/css">
	.norm{
		border: 1px solid black;
	}
	.success{
		border: 1px solid green;
	}
	.danger{
		border: 1px solid red;
	}
</style>
<div id='app'>
	<input type="text" v-model.lazy="userid" :class="useridclass"/>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			userid: "",
			useridclass:"norm"
		},
		watch: {
			userid(newdata) {
				var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
				if(reg.test(newdata)){
					this.useridclass="success"
				}
				else{
					this.useridclass="danger"
				}
			}
		}
	})
</script>

VUE监听属性的触发机制

借鉴别人的代码例子如下：

		<div id="computed_props">
			分 : <input type="text" v-model="minutes">
			秒 : <input type="text" v-model="seconds">
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#computed_props',
				data: {
					minutes: 0,
					seconds: 0
				},
				methods: {},
				computed: {},
				watch: {
					minutes: function(val) {
						console.log("minutes监听")
						this.minutes = val;
						this.seconds = val * 60;
					},
					seconds: function(val) {
						console.log("seconds监听")
						this.minutes = val / 60;
						this.seconds = val;
					}
				}
			});
		</script>

假设当我们在分的输入框输入6，则触发了minutes监听。在minutes监听方法中val=6、minutes=6、seconds=360，这时seconds 改变了值。继而触发seconds监听，在seconds监听方法中val=360、minutes=6、seconds=360。这里会再触发一次minutes监听，监听中发现minutes、seconds并没有改变，不再触发其他监听事件。