<script>
var vm = new Vue({
el: '#example',
computed:{
time1: function () {
return (new Date()).toLocaleTimeString()
}
},
methods: {
time2: function () {
return (new Date()).toLocaleTimeString()
}
}
})
</script>
假设有一个性能开销比较大的的计算属性A，它需要遍历一个极大的数组和做大量的计算。可能有其他的计算属性依赖于 A 。如果没有缓存，将不可避免的多次执行A的getter！如果不希望有缓存，则用 method 替代
watch
Vue提供了一种通用的方式来观察和响应Vue实例上的数据变动：watch属性。watch属性是一个对象，键是需要观察的表达式，值是对应回调函数，回调函数得到的参数为新值和旧值。值也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用
$watch()，遍历watch对象的每一个属性[注意]不应该使用箭头函数来定义 watch 函数
<div id="app">
<button @click="a++">a加1</button>
<p>{{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: 1,
message:''
},
watch: {
a: function (val, oldVal) {
this.message = 'a的旧值为' + oldVal + '，新值为' + val;
}
}
})
</script>上面代码中，当a的值发生变化时， 通过watch的监控，使message输出相应的内容
【$watch】
除了使用数据选项中的watch方法以外，还可以使用实例对象的$watch方法， 该方法的返回值是一个取消观察函数，用来停止触发回调
<div id="app">
<button @click="a++">a加1</button>
<p>{{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: 1,
message:''
}
})
var unwatch = vm.$watch('a',function(val, oldVal){
if(val === 10){
unwatch();
}
this.message = 'a的旧值为' + oldVal + '，新值为' + val;
})
</script>上面的代码中，当a的值更新到10时，触发unwatch()，来取消观察。点击按钮时，a的值仍然会变化，但是不再触发watch的回调函数
以上这篇基于Vue实例对象的数据选项就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
