Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre）

Vue3官网-高级指南（十七）响应式计算computed和侦听watchEffect（onTrack、onTrigger、onInvalidate、副作用的刷新时机、watch 、pre）、渲染机制和优化、Vue 2 中的更改检测警告

总结：

• 补充

  • 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 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

• 响应式计算和侦听

  • 响应式计算computed

    • computed 可接受一个带有 onTrack 和 onTrigger 选项的对象作为第二个参数：

      • onTrack 会在某个响应式 property 或 ref 作为依赖被追踪时调用。

      • onTrigger 会在侦听回调被某个依赖的修改触发时调用。

        所有回调都会收到一个 debugger 事件，其中包含了一些依赖相关的信息。推荐在这些回调内放置一个 debugger 语句以调试依赖。

        const plusOne = computed(() => count.value + 1, {
                    
          onTrack(e) {
                    
            // 当 count.value 作为依赖被追踪时触发
            debugger
          },
          onTrigger(e) {
                    
            // 当 count.value 被修改时触发
            debugger
          }
        })
        // 访问 plusOne，应该触发 onTrack
        console.log(plusOne.value)
        // 修改 count.value，应该触发 onTrigger
        count.value++
        

  • watchEffect

    • 简介
      • [笔记十六包含的内容]虽然 Vue 的公开 API 不包括任何直接创建副作用的方法，但它确实暴露了一个叫做 watchEffect 的函数，它的行为很像我们例子中的 createEffect 函数。我们会在该指南后面的部分详细讨论这个问题。
      • 为了根据响应式状态自动应用和重新应用副作用，我们可以使用 watchEffect 函数。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
    • 清除副作用onInvalidate
      • 有时副作用函数会执行一些异步的副作用，这些响应需要在其失效时清除 (即完成之前状态已改变了) 。所以侦听副作用传入的函数可以接收一个 onInvalidate 函数作入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：
        • 副作用即将重新执行时
        • 侦听器被停止 (如果在 setup() 或生命周期钩子函数中使用了 watchEffect，则在组件卸载时)
    • 副作用刷新时机
      • 组件的 update 函数也是一个被侦听的副作用。当一个用户定义的副作用函数（watchEffect函数）进入队列时，默认情况下，会在所有的组件 update 前执行
      • （下面这种是与正常情况相悖的方法，才会使用flush）如果需要在组件更新(例如：当与模板引用一起)后重新运行侦听器副作用，我们可以传递带有 flush 选项的附加 options 对象 (默认为 'pre')
      • 从 Vue 3.2.0 开始，watchPostEffect 和 watchSyncEffect 别名也可以用来让代码意图更加明显。

  • watch

    • watch API 完全等同于组件侦听器 property。watch 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调。

      • 与 watchEffect 比较，watch 允许我们：
        • 懒执行副作用；
        • 更具体地说明什么状态应该触发侦听器重新运行；
        • 访问侦听状态变化前后的值。

    • pre

      • pre代表先前数据

        const firstName = ref('')
        const lastName = ref('')
        
        watch([firstName, lastName], (newValues, prevValues) => {
                    
          console.log(newValues, prevValues)
        })
        //pre前缀表示之前的数据
        firstName.value = 'John' // logs: ["John", ""] ["", ""]
        lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""]
        

      • 注意多个同步更改只会触发一次侦听器。

1. 响应式计算和侦听

本节使用单文件组件语法作为代码示例

计算值

有时我们需要依赖于其他状态的状态——在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用 computed 函数：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1