目录

  • Vue中的响应式对象
  • 独立的响应式值
  • 计算变量
    • 监听响应式变量
  • setup方法

Vue中的响应式对象

Vue3允许在setup()中定义组件需要的数据和方法, 通过return在模板中可以直接使用

  1. reactive方法

        
                    const App = Vue.createApp({            setup() {                let myData = Vue.reactive({                    value: 0                })                function click() {                    myData.value += 1                    console.log(myData.value)                }                return {                    myData,                    click                }            },            template: `                
    测试数据: {{myData.value}}
                                `        })        App.mount("#Application")    // 使用这个方法对自定义的JavaScript对象进行包装, 为其添加响应性

独立的响应式值

  1. Vue提供的ref方法来定义响应式独立值, ref方法会帮我们完成对象的包装
    
                const App = Vue.createApp({            setup() {                let myObject = Vue.ref(0)                function click() {                    myObject.value += 1                    console.log(myObject.value)                }                return {                    myObject,                    click                }            },            template: `                
测试数据: {{myObject}}
                            `        })        App.mount("#Application")    // 在模板中使用setup中返回的使用ref定义的数据时, 数据对象会自动展开, 直接使用即可
  1. toRefs方法对响应式对象进行解构赋值
    
                const App = Vue.createApp({            setup() {                let myObject = Vue.reactive({                    value: 0                })                let { value } = Vue.toRefs(myObject)                                // Vue会自动将解构的数据转换成ref对象变量, 在setup方法内部使用时, 要使用其内部包装的value属性                function click() {                    value.value += 1                    console.log(value.value)                }                return {                    value,                    click                }            },            template: `                
测试数据: {{value}}
                            `        })        App.mount("#Application")

计算变量

使用Vue提供的computed方法来创建计算变量

    
                const App = Vue.createApp({            setup() {            let a = Vue.ref(1);            let b = Vue.ref(2);                        let sum = Vue.computed(() => {                    return a.value + b.value                });                                function click() {                    a.value += 1                    b.value += 2                }                                return {                    sum,                    click                }            },            template: `                
测试数据: {{sum}}
                            `        })        App.mount("#Application")            // 计算变量也支持被赋值    /**    let sum = Vue.computed({    set(value) {    a.value = 0    b.value = 0    }    get() {    return a.value + b.value    }    })    */

监听响应式变量

Vue提供的watchEffect方法和watch方法, 无需手动指定要监听的变量

Vue.watch(param, func)Vue.watchEffect(param, func)

setup方法

setup方法会在组件创建前执行, 即对应组件的生命周期方法beforeCreate调用之前执行

组合式API的核心方法, 代码层面上将分离的相关逻辑点进行聚合

接受两个参数props 和 context

方法中可定义声明周期行为