计算属性
计算属性的基本用法
计算属性是一个特殊属性,值依赖于另外一些数据动态计算出来的
注意点:
- 计算属性必须定义在computed节点中
- 计算属性必须是一个function(函数),计算属性必须有返回值
- 计算属性不能被当作方法调用,要作为属性来用
- 计算属性也是属性,不要和data里重名,用起来也和data类似
语法:
computed:{
计算属性名(){
return '值'
}
}
式例:
<template>
<div>
<!-- 计算属性 -->
<p>语文: {{ score1 }}</p>
<p>数学: {{ score2 }}</p>
<p>总分: {{ total }}</p>
</div>
</template>
<script>
export default {
data() {
return {
score1: 90,
score2: 100,
}
},
computed: {
total() {
return this.score1 + this.score2
}
}
</script>
计算属性缓存
计算属性,基于依赖项的值进行缓存,依赖的变量不变,直接从缓存取结果
如:渲染时第一次遇到,vue的变量,函数返回值存入缓存,再次遇到直接使用缓存的值,不在调用函数
计算属性完整写法
计算属性的简单写法,只能获取数据,不能修改数据
完整写法语法:
<template>
<div>
<!-- v-model 双向绑定 -->
<!-- vue变量影响视图 -->
<!-- 视图数据变化影响vue变量 -->
<input type="text" v-model="uname">
</div>
</template>
<script>
export default {
# // set 设置
# // get 获取
#// get 函数只有使用计算属性时 get函数就会被调用,需要return 一个值
#// set 函数给计算属性赋值时set函数就会被调用
# //大白话:用的时候调用get函数,修改的时候调用set函数
computed:{
uname: {
set(val){
console.log(val);
},
get(){
return 'zs123'
}
}
}
}
</script>
get 函数等同于简单写法的函数
计算属性必须要有get,而且需要返回结构
如果要修改计算属性,需要使用set函数,获取数据需要get
set方法的第一个参数就是用户赋给计算属性的值
侦听器 wacht
wacht: 可以侦听到data/computed属性值得变化
语法:
wacht:{
'被侦听的属性名'(newval,oldval)
}
简单侦听语法
<template>
<input type="text" v-model="fn">
</template>
<script>
export default {
data(){
return{
fn:'张三'
}
},
watch:{
#// 被侦听的属性名需要跟 被侦听的vue里面的变量名一致
#// newval 新值,最新的值,改变之后的值
#// oldval 原始值,改变之前的值
fn(newval,oldval){
console.log(newval,oldval);
}
}
}
</script>
复杂侦听类型
如果监听的是复杂数据类型，需要深度监听，需要指定deep为true,需要用到监听的完整的写法
// 1. 默认情况下，watch只能监听到简单类型的数据变化,如果监听的是复杂类型，只会监听地址是否发生改变，不会监听对象内部属性的变化。
// 2. 需要使用监听的完整写法 是一个对象
watch: {
// friend (value) {
// console.log('你变了', value)
// }
friend: {
// handler 数据发生变化，需要执行的处理程序
// deep: true 如果true,代表深度监听，不仅会监听地址的变化，还会监听对象内部属性的变化
// immediate: 立即 立刻 是否立即监听 默认是false 如果是true,代表页面一加载，会先执行一次处理程序
handler (value) {
console.log('你变了', value)
},
deep: true,
immediate: true
}
},
