Vue3官网-高级指南（十六）vue响应式原理\步骤\本质（副作用effect、响应式状态reactive、响应式原始值ref(解包)、构造响应值toRefs）、proxy(代理、this)

本文链接：https://blog.csdn.net/qq_43456781/article/details/120506673

Vue3官网-高级指南（十六）vue响应式原理\步骤\本质（副作用effect、响应式状态reactive、响应式原始值ref(解包)、构造响应值toRefs）、proxy(代理、this)

文章目录

Vue3官网-高级指南（十六）vue响应式原理\步骤\本质（副作用effect、响应式状态reactive、响应式原始值ref(解包)、构造响应值toRefs）、proxy(代理、this)

总结：
补充
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

truthy（真值）：在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。括号内都是假值falsy。

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

==Event.preventDefault方法取消浏览器对当前事件的默认行为。==比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了；再比如，按一下空格键，页面向下滚动一段距离，使用这个方法以后也不会滚动了。该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

vue：用组件（app.component）构建一个模板（template），并反复使用模板
父组件、子组件
const app = Vue.createApp({
          
  components: {
          
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
上面代码中app为父组件，ComponentA和ComponentB为子组件

context.emit

父组件通过 :data="data" 传递数据

父组件通过 @fun="fun" 传递方法

子组件通过 props 接收父组件传递的值

子组件通过 $emit 调用父组件的方法并传递数据
Vue中美元$符号的意思

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

vue中$refs的作用？

当我们需要获取一个dom元素进行操作的时候可以利用原生js的getElementByXxx 而在vue中可以设置refs来获取这个dom元素

第三方网站

greensock API(GSAP)：是一套用于所有主流浏览器中制作高性能html5动画的工具。他们有一个很棒的 ease visualizer，帮助你建立精心制作的画架。

GSAP的全名是==GreenSock Animation Platform，这个名字是有些怪异（官网还在各种安利你加入它的Club），但它的确是一个从flash时代一直发展到今天的专业动画库。==参照CSDN：https://blog.csdn.net/weixin_39939012/article/details/80833073

animate.css ：集成第三方 CSS 动画库

CSS Triggers ：来查看哪些属性会在动画时触发重绘。这个网站是用来告诉开发者不同内核浏览器对css属性修改的重绘/回流情况，开发者知道了这些细节可以提高页面性能。

JavaScript钩子

添加 :css="false"，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。

解构（Destructuring）

ES6允许按照一定模式从数组和对象中提取值，然后对变量进行复制，这被称为解构（Destructuring）

API参考

https://v3.cn.vuejs.org/api/refs-api.html#ref

自定义指令

注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

渲染函数

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
深入响应性原理
proxy

网址：https://blog.csdn.net/qq_43456781/article/details/119422451

定义

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

this问题

使用 Proxy 的一个难点是 this 绑定。我们希望任何方法都绑定到这个 Proxy（代理本身），而不是目标对象（target），这样我们也可以拦截它们。

虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

ES6 引入了另一个名为 Reflect 的新特性，它允许我们以最小的代价消除了这个问题：
vue响应术语
副作用——effect

Vue 通过一个副作用 (effect) 来跟踪当前正在运行的函数。副作用是一个函数的包裹器，在函数被调用之前就启动跟踪。Vue 知道哪个副作用在何时运行，并能在需要时再次执行它

副作用是许多关键功能的起点。例如，组件的渲染和计算属性都在内部使用副作用。任何时候，只要有东西对数据变化做出奇妙的回应，你就可以肯定它已经被包裹在一个副作用中了。

虽然 Vue 的公开 API 不包括任何直接创建副作用的方法，但它确实暴露了一个叫做 watchEffect 的函数，它的行为很像我们例子中的 createEffect 函数。我们会在该指南后面的部分详细讨论这个问题。
响应式状态——reactive
从 Vue 3 开始，我们的响应性现在可以在一个独立包中使用。将 $data 包裹在一个代理中的函数被称为 reactive。我们可以自己直接调用这个函数，允许我们在不需要使用组件的情况下将一个对象包裹在一个响应式代理中。

JavaScript 对象创建响应式状态，可以使用 reactive 方法

如果你不想要访问实际的对象实例，可将其用 reactive 包裹
响应式状态——reactive解构,torefs
我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联
import {
               reactive, toRefs } from 'vue'

const book = reactive({
              
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: 'You are reading this book right now ;)',
  price: 'free'
})

let {
               author, title } = toRefs(book)

title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'
vue响应的关键步骤

当一个值被读取时进行追踪：proxy 的 get 处理函数中 track 函数记录了该 property 和当前副作用。

当某个值改变时进行检测：在 proxy 上调用 set 处理函数。

重新运行代码来读取原始值：trigger 函数查找哪些副作用依赖于该 property 并执行它们。

vue响应系统本质

Vue 中响应式状态（reactive）的基本用例是我们可以在渲染期间使用它。因为依赖跟踪的关系，当响应式状态改变时视图会自动更新。这就是 Vue 响应性系统的本质。

当从组件中的 data() 返回一个对象时，它在内部交由 reactive() 使其成为响应式对象。模板会被编译成能够使用这些响应式 property 的渲染函数。
refs 独立的响应式原始值
基础

独立的原始值 (例如，一个字符串)，我们想让它变成响应式的。

Vue 为我们提供了一个可以做相同事情的方法——ref

ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是 ref 名称的来源。
ref解包
当 ref 作为渲染上下文 (从 setup() 中返回的对象) 上的 property 返回并可以在模板中被访问时，它将自动浅层次解包内部值

只有访问嵌套的 ref 时需要在模板中添加 .value
Ref 解包仅发生在被响应式 Object 嵌套的时候。当从 Array 或原生集合类型如 Map访问 ref 时，不会进行自动解包（需要加上.value）：
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new 