Vue3中的计算属性和属性监听

compute计算属性

Vue3中可以通过 compute进行监听计算属性,他返回的是一个ref的对象,也就是说 通过compuye这种方式计算属性实际上是进行了ref的操作

javascript 复制代码
import { computed } from 'vue
const user = reactive({
	firstName: 'A',
    lastName: 'B'
})
// 只有getter的计算属性
// 监听计算fullName1属性
const fullName1 = computed(() => {
    console.log('fullName1')
    return user.firstName + '-' + user.lastName
})
// 有getter与setter的计算属性
// 监听计算fullName2属性
const fullName2 = computed({
    get () {
    	console.log('fullName2 get')
        return user.firstName + '-' + user.lastName
    },
    set (value: string) {
        console.log('fullName2 set')
        const names = value.split('-')
        user.firstName = names[0]
        user.lastName = names[1]
     }
})
return {
    fullName1,
    fullName2,
}

watch 属性监听

  • 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调;
  • 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次;
  • 通过配置deep为true, 来指定深度监视
javascript 复制代码
import { watch } from 'vue
const user = reactive({
	firstName: 'A',
    lastName: 'B'
})
watch(user, () => {
    fullName3.value = user.firstName + '-' + user.lastName
}, {
    immediate: true,  // 是否初始化立即执行一次, 默认是false
    deep: true, // 是否是深度监视, 默认是false
})

其中 watch 也可以监听多个数据

javascript 复制代码
/* 
watch多个数据: 
    使用数组来指定
    如果是ref对象, 直接指定
    如果是reactive对象中的属性,  必须通过函数来指定
*/
// ref 对象
watch([user.firstName, user.lastName, fullName3], (values) => {
	console.log('监视多个数据', values)
})
// reactive 对象
watch([() => user.firstName, () => user.lastName, fullName3], (values) => {
	console.log('监视多个数据', values)
})

watchEffect 属性监听

  • 不需要配置immediate,默认初始时就会执行第一次, 从而可以收集需要监视的数据;
  • 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
javascript 复制代码
import { watchEffect} from 'vue
const user = reactive({
	firstName: 'A',
    lastName: 'B'
})
// 监视所有回调中使用的数据
watchEffect(() => {
    fullName3.value = user.firstName + '-' + user.lastName
}) 
return {
    user,
    fullName1,
    fullName2,
    fullName3
}
相关推荐
li35747 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj8 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel8 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel8 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky9 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵9 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld10 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记10 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
东风西巷11 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求