# VUE3响应式原理

VUE3响应式原理

vue3是基于ES6新增的proxy代理实现的
vue3官网

一：setup组件

setup() 函数在组件创建 created() 之前执行。

setup() 函数接收两个参数 props 和 context。

第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。

第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。

注意：在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

vur3 钩子函数

setup() : //开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount() : //组件挂载到节点上之前执行的函数；
onMounted() : //组件挂载完成后执行的函数；
onBeforeUpdate(): //组件更新之前执行的函数；
onUpdated(): //组件更新完成之后执行的函数；
onBeforeUnmount(): //组件卸载之前执行的函数；
onUnmounted(): //组件卸载完成后执行的函数；
onActivated(): //被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): //比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured(): //当捕获一个来自子孙组件的异常时激活钩子函数。

以下实例使用组合 API 定义一个计数器：

实例（src/APP.vue）
<template>
    <div>
        <p>计数器实例: {
   {
    count }}</p>
        <input @click="myFn" type="button" value="点我加 1">
    </div