计算属性
在setup函数中使用计算属性函数,根据现有响应式数据经过一定的计算得到全新的数据
基本写法(计算属性只有get方法)
接收一个getter函数,并为getter函数返回的值,返回一个不变的ref对象
- 从vue框架中导入computed函数
- 在setup函数中执行computed函数
- 把computed函数调用完的执行结果放到setup的return值对象中
const {reactive,computed}=Vue;
<script>
const app = Vue.createApp({
setup() {
const {ref,computed}=Vue;
const count = ref(0);
const handleClick=()=>{
count.value += 1 ;
}
const countAddFive=computed(()=>{
return count.value +5 ;
})
return {count,handleClick,countAddFive}
},
template:`
<div>
<span @click="handleClick">{{count}}</span>--{{countAddFive}}
</div>
`,
});
const vm = app.mount('#root');
</script>
完整写法(计算属性有get方法和set方法)
接收一个具有get和set的对象,返回一个可变的(可读写)ref对象
<script>
const app = Vue.createApp({
setup() {
// 引入computed方法
const {ref,computed}=Vue;
const count = ref(0);
const handleClick=()=>{
count.value += 1 ;
}
let countAddFive=computed({
// 获取属性时
get:()=>{
return count.value +5 ;
},
// 赋值修改时
set:(param)=>{
return count.value = param-5 ;
}
})
setTimeout(()=>{
countAddFive.value= 100;
},3000)
return {count,handleClick,countAddFive}
},
template:`
<div>
<span @click="handleClick">{{count}}</span>--{{countAddFive}}
</div>
`,
});
const vm = app.mount('#root');
</script>
侦听器
watch侦听器
显示指定依赖源,依赖源更新时执行回调函数
- 从vue框架中导入watch函数
- 在setup函数中执行watch函数开启对响应式数据的监听
watch可侦听多个数据的变化,用一个侦听器承载
watch立即执行
配置immediate属性未true
侦听器失效
watchEffect侦听器
自动收集依赖源,依赖源更新时候重新执行自身
其中watchEffect与watch区别:
- watchEffect立即执行,没有惰性;watch具备一定惰性;
- watchEffect不需要传递侦听的内容,会自动感知代码依赖;不需要传递很多参数,只要传递一个回调函数
- watchEffect不能获取之前数据的值
<script>
const app = Vue.createApp({
setup() {
const {reactive,watch,watchEffect,toRefs}=Vue;
const nameObj = reactive({name:'戴尔',englishname:'dell'});
watchEffect(()=>{
console.log('watchEffect','abc')
console.log('watchEffect',nameObj.name)
})
const{name,englishname} = toRefs(nameObj);
return {name,englishname}
},
template:`
<div>
<div>
姓名:<input v-model ="name">
</div>
<div>
姓名是{{name}}
</div>
<div>
英文姓名:<input v-model ="englishname">
</div>
<div>
英文姓名是{{englishname}}
</div>
</div>
`,
});
const vm = app.mount('#root');
</script>
侦听器失效