今天继续学习vue3-setup的参数&计算属性&监听属性。

setup的参数

简单介绍

• props:接收父组件传入的通过props声明过的属性
• context:是一个对象，解构出来包含：

- attrs:接收父组件传入的没有通过props声明过的属性，相当于this.$attrs
- slots:接收父组件传入的插槽内容的对象，相当于this.$slots
- emit:用来分发自定义事件的函数，相当于this.$emit

使用方法

计算属性computed

简单介绍

vue2中的计算属性

computed:{
    // 只有getter
    ageInfo() {
        return this.name + ":" + this.age + "岁"
    },
    // 有getter和setter
    ageInfo2() {
        get() {
            return this.name + ":" + this.age + "岁"
        },
        set(val) {
            const ages = value.split(":")
            this.name = ages[0]
            this.age = ages[1]
        }
        
    }

vue3的计算属性

computed-用法和vue2类似，不过需要先引入computed

使用方法

监听属性

简单介绍

vue2中的监听属性

watch: {
    name(newVal, oldVal) {
        console.log(newVal, oldVal)
    },
    // 立即监听、深度监听
    name: {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        immediate: true, // 初始化立即执行一次
        deep: true, // 深度监听
    },
    'name.a'(newVal, oldVal) {
        console.log(newVal, oldVal)
    }
}

vue3中的监听属性

watch-指定监听数据
    1.监听指定的一个或多个响应式数据，一旦数据变化，就自动执行监听回调
        a.如果是监听reactive对象中的属性，必须通过函数来指定
        b.监听多个数据，使用数组来指定
    2.默认初始化时不执行回调，但可以通过配置immediate为true，来指定初始化时立即执行一次
    3.通过配置deep为true，来指定深度监听
watchEffect-不指定监听数据
    1.不用直接指定要监听的数据，回调函数中使用的哪些响应式数据就监听哪些响应式数据
    2.默认初始化时就会执行一次
使用时需先引入watch和watchEffect

使用方法

先更新一部分，后面会继续更新，敬请期待。