Vue.js计算属性
计算属性关键词:computed.
计算属性在处理一些复杂逻辑时是很有用的。
一般写作
<div id="app">
{{ message.split('').reverse().join('') }} /*反转字符串*/
</div>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
解析上图中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed,效果一样,但是computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
例子:
<div id="app">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
//是属性,不是方法
//方法不会有缓存,conputed会根据依赖(归vue管理的数据,可以响应式变化)的属性进行缓存 由get和set构成 不能只写set
computed:{//放在computed中最后也会放在vm上,不能和methods与data重名 默认调用get方法,必须要有return 不支持异步
get(){
},
set(){//一般情况下,通过js赋值影响其他人或者表单元素设置值的时候调用set方法
}
},
data:{
}
})
</script>
Vue.js 监听属性
Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化
<div id="app">
<!-- v-model后面跟的是在输入框里填入的东西 -->
<input type="text" v-model="a">{{msg}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{a:"",msg:""},
watch:{//只有值变化的时候才发生变化 支持异步 更多的使用computed
a(newVal,oldVal){//watch的属性名字要和观察的人的名字一致
if(newVal.length<3){
return this.msg = "太少"
};
if(newVal.length>6){
return this.msg = "太多"
}
}
}
})
</script>
https://www.runoob.com/vue2/vue-computed.html