13.1 Vue3的响应式原理

Vue3的响应式原理与Vue2有所不同。Vue2使用了Object.defineProperty来实现响应式，而Vue3则使用了ES6的Proxy对象。

在Vue3中，当我们创建一个响应式的数据对象时，Vue3会使用一个叫做reactive的函数将该对象转换成响应式对象。reactive函数会使用Proxy对象对原始数据对象进行代理，拦截对该对象的所有访问和修改操作，并且在必要的时候触发响应式更新。

当我们对响应式对象进行属性的访问或修改时，Proxy对象会拦截这些操作，并通知Vue3进行响应式更新。这个过程中，Vue3会使用一个叫做effect的函数来收集依赖，然后在属性发生变化时触发依赖的更新。

effect函数是Vue3中实现副作用的核心函数，我们可以通过调用它来创建响应式的副作用函数。当我们创建一个副作用函数时，effect函数会自动执行该函数，并且在副作用函数中访问到的所有响应式数据都会被自动收集为依赖。当依赖发生变化时，副作用函数会自动被重新执行。

总的来说，Vue3的响应式原理与Vue2有所不同，但是它仍然是基于数据劫持的原理来实现响应式的。Vue3使用Proxy对象和effect函数来实现数据劫持和响应式更新，使得代码更加简洁、高效，并且可以更好地支持TypeScript等现代JavaScript特性。

13.2 Vue3使用computed计算属性

在Vue3中，可以使用computed函数来定义计算属性。computed函数接受一个函数作为参数，这个函数返回的值就是计算属性的值。

下面是一个示例：

import { computed } from 'vue'
export default {setup() {const count = ref(0)const doubledCount = computed(() => count.value * 2)return {count,doubledCount}}
}

在这个示例中，我们使用computed函数定义了一个计算属性doubledCount，它的值是count的两倍。count是一个响应式变量，使用ref函数创建。

在computed函数的参数中，我们定义了一个箭头函数，它返回了count.value * 2。由于count是一个响应式变量，所以当count的值改变时，doubledCount的值也会自动更新。

在setup函数中，我们将count和doubledCount返回给模板使用。在模板中，我们可以通过{{ count }}和{{ doubledCount }}来获取它们的值。

13.3 Vue3使用watch监视属性的注意点

13.3.1 监视ref对象

在Vue3中，ref对象是一个包装器，它包含一个value属性和一些辅助方法。当我们创建一个ref对象时，我们实际上是在创建一个带有value属性的JavaScript对象。因此，在监视ref对象时，我们需要监视的是ref对象的value属性而不是ref对象本身。这就意味着，当我们调用watch函数时，需要传入ref对象的value属性而不是ref对象本身。例如：

import { ref, watch } from 'vue';
const count = ref(0);
watch(count.value, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);
});

在上面的例子中，我们监视了count.value的变化，而不是count对象本身的变化。

13.3.2 监视reactive对象

在Vue3中，reactive对象是一个响应式对象，它可以包含多个属性。当我们创建一个reactive对象时，我们实际上是在创建一个带有多个属性的JavaScript对象。因此，在监视reactive对象时，我们需要监视整个对象而不是它的某个属性。例如：

import { reactive, watch } from 'vue';
const state = reactive({count: 0,message: 'Hello World!'
});
watch(state, (newValue, oldValue) => {console.log('state changed', newValue, oldValue);
});

在上面的例子中，我们监视了整个state对象的变化，而不是state.count或state.message的变化。

13.3.3 监视嵌套属性

当监视reactive对象的嵌套属性时，需要在watch函数的选项对象中指定deep选项为true，否则只会监听属性的赋值操作，而不会监听属性内部的变化。例如：

import { reactive, watch } from 'vue';
const state = reactive({nested: {count: 0}
});
watch(() => state.nested,(newValue, oldValue) => {console.log('nested state changed', newValue, oldValue);},{ deep: true }
);

13.3.4 避免循环引用：

如果reactive对象中包含循环引用，那么watch函数会陷入无限递归，导致程序崩溃。因此，在使用watch函数时需要注意避免循环引用的问题。例如：

import { reactive, watch } from 'vue';
const state = reactive({a: 1,b: {c: 2}
});
// 此处会陷入无限递归，导致程序崩溃
state.b.d = state;
watch(state,(newValue, oldValue) => {console.log('state changed', newValue, oldValue);},{ deep: true }
);

13.4 watchEffect函数

在Vue3中，watchEffect函数可以用来监视响应式变量的变化并执行副作用函数。当响应式变量发生变化时，副作用函数会被重新执行。

下面是一个示例：

import { reactive, watchEffect } from 'vue'
export default {setup() {const state = reactive({count: 0})watchEffect(() => {console.log('Count changed to:', state.count)})function increment() {state.count++}return {state,increment}}
}

在这个示例中，我们使用reactive函数创建了一个响应式对象state，其中包含一个属性count。然后我们使用watchEffect函数监视了state.count的变化，并在控制台中打印了它的值。

在setup函数中，我们将state和increment函数返回给模板使用。在模板中，我们可以通过{{ state.count }}来获取count的值，并通过increment函数来增加count的值。

当我们在模板中点击增加按钮时，state.count的值会发生变化，watchEffect函数会被重新执行并在控制台中打印新的值。这个过程是自动触发的，不需要显式地定义一个watcher函数。