Vue3响应式基础

响应式基础欢迎订阅我的公众号<生活密码>，或者CSDN专栏Vue3入门到实战系列教程声明响应式状态相当于Vue2.x中的Vue.observable()API，重命名以避免与RxJS中的observables混淆。API返回反应对象状态。这种反应式转换是一种“深度转换”——它影响嵌套对象传递的所有属性。Vue中反应状态的基本用例是我们可以在渲染期间使用它。由于依赖跟踪，当反应状态改变时，视图会自动更新。这就是Vue响应式系统的本质。当一个对象从组件中的data()返回时，它会在内部传递给reactive()以使其具有反应性。模板将被编译成可以使用这些响应属性的渲染函数。我们也按照之前的项目在src/TemplateM.vue中写了如下代码：写一个计数器，在vue中导出reactive和defineComponent。DefineComponent用于定义组件，reactive用于创建响应式数据。最后，在设置函数中返回一个对象，它有一个添加方法和状态响应数据。创建单独的反应值作为refs.当然，我们可以创建一个具有相同字符串属性的对象并将其传递给reactive。Vue为我们提供了一个方法来做同样的事情——ref：ref返回一个可变的反应对象作为它的内部值——一个反应引用，这就是名字的来源。该对象只包含一个名为value的属性：同样，我们在上面的代码中添加以下代码：事实上，我们注意到在模板中，当ref作为渲染上下文（从setup()返回的对象）的属性返回时，可以在template访问时，会自动扩展到内部值。无需在模板中附加.value。访问ReactiveObjectsRef扩展仅在被ReactiveObjects嵌套时发生。从Array或Map等原生集合类型访问ref时，不会展开：如下代码我们可以看到，一个reactive([ref('Vue3Guide')]),然后根据books[0].value访问：constmap=reactive(newMap([['count',ref(0)]))复制代码安慰。log(map.get('count').value)Reactivestatedestructuring当我们想使用大型反应对象的一些属性时，我们可能会想使用ES6解构来获取我们想要的属性：Preventchangingreactiveobjectsusingreadonly有时我们想要跟踪对反应对象（ref或reactive）的更改，但我们也希望防止它在应用程序的某个地方被更改例如，当我们有一个提供的反应对象时，我们不希望它在注入时被改变。为此，我们可以基于原始对象创建一个只读Proxy对象：import{reactive,readonly}from'vue'constoriginal=reactive({count:0})constcopy=readonly(original)//convert在复制原件上将触发依赖于original.count++//转换副本的侦听器将失败并导致警告copy.count++//警告：“对键'count'的设置操作失败：目标是只读的。”