一、Vue计算属性
基础语法:计算属性是通过computed属性定义,然后可以在模板中当做一个普通属性去使用;计算属性可以书写复杂的逻辑
<div id="app">
{{publish}}
</div>
let app = Vue.createApp({
computed:{
publish(){
return Math.random() > 0.5 ? 'yes' : 'no';
}
}
}).mount('#app')
计算属性的特点:计算属性会与使用的其他属性产生依赖关系,当其他属性发生改变时,计算属性会跟随一起变化
计算属性和方法的区别:计算属性会缓存计算结果,只要依赖属性不发生变化,不管你使用多少次计算属性,除了第一次执行计算以外,之后的结果都是直接从缓存中拿取。
方法则是,你用多少次,就重新计算多少次!
官方的建议: 对于任何复杂逻辑,你都应当使用计算属性
<body>
<div id="app">
<p>{{say}}</p>
<p>{{say}}</p>
<p>{{say}}</p>
<p>{{say1()}}</p>
<p>{{say1()}}</p>
<p>{{say1()}}</p>
</div>
</body>
<script src="../vue.global.js"></script>
<script>
let app = Vue.createApp({
computed:{
say(){
console.log('computed');
return 'hello'
}
},
methods:{
say1(){
console.log('methods');
return 'hello'
}
}
}).mount('#app')
</script>
结果:
二、侦听器
Vue提供了一种更通用的方法来观察和响应Vue实例上的数据变动: 侦听属性:watch;
当需要在数据变化时执行异步或开销较大的操作时, 这个方式是最有用的;比如注册时监听用户名是否已经存在;
watch的用法:把你想要观察的数据变量,写成同名的函数在watch里就可以了,数据变化时,就会触发方法里的逻辑。
data(){
return {
val:0,
}
},
watch:{
val(newValue,oldValue){
if(newValue==50){
alert('不要再拖动了!')
}
}
}