Vue3官网-可复用&组合式API（十三）Mixin（不如组合式API）、自定义指令（app.directive、el，binding，动态指令参数，函数简写）、Teleport(传送)

Vue3官网-可复用&组合式API（十三）Mixin（不如组合式API）、自定义指令（app.directive、el，binding，动态指令参数，函数简写）、Teleport(传送)

总结：

• 补充

  • 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 元素进行底层操作，这时候就会用到自定义指令。

• Mixin（不如组合式API）

  • 基础

    • Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
    • 一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。
    • 组合式API比Mixin好很多

  • 选项合并

    • 当组件和 mixin 对象含有同名选项时，这些选项将以恰当的方式进行“合并”

    • 在data 的 property 发生冲突时，会以组件自身的数据为优先，舍去 mixin 对象的选项

    • mixin 对象的钩子将在组件自身钩子之前调用。（个人理解，因为本身就写在组件的最前面）

      const app = Vue.createApp({
                
        mixins: [myMixin],
        created() {
                
          console.log('组件钩子被调用')
        }
      })
      

    • 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

  • 自定义选项合并策略

    • app.config.optionMergeStrategies.custom = (toVal, fromVal) => toVal || fromVal
      

    • toVal 代表 子实例返回值（一般是后创建的app实例/应用实例）

    • fromVal 代表 父实例返回值（一般是全局注册的Mixin）

• 自定义指令（app.directive）

  • 简介

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

  • 一般形式

    • const app = Vue.createApp({
                })
      // 注册一个全局自定义指令 `v-focus`
      app.directive('focus', {
                
        // 当被绑定的元素挂载到 DOM 中时……
        mounted(el) {
                
          // 聚焦元素
          el.focus()
        }
      })
      

  • 动态指令参数

    • el

      指令绑定到的元素。这可用于直接操作 DOM。

    • binding

      包含以下 property 的对象。

      • instance：使用指令的组件实例。
      • value：传递给指令的值。例如，在 v-my-directive="1 + 1" 中，该值为 2。
      • oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。
      • arg：参数传递给指令 (如果有)。例如在 v-my-directive:foo 中，arg 为 "foo"。
      • modifiers：包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。
      • dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中

    • 一般形式

      • app.directive('pin', {
                    
          mounted(el, binding) {
                    
            el.style.position = 'fixed'
            // binding.value 是我们传递给指令的值——在这里是 200
            el.style.top = binding.value + 'px'
          }
        })
        

    • 进一步升级动态

      • <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
        ----------------------------------------
        app.directive('pin', {
                    
          mounted(el, binding) {
                    
            el.style.position = 'fixed'
            // binding.arg 是我们传递给指令的参数
            const s = binding.arg || 'top'
            el.style[s] = binding.value + 'px'
          }
        })
        

    • 还可以进一步升级——更新

      •  <p v-pin:[direction]="pinPadding">Stick me {
                    {
                     pinPadding + 'px' }} from the {
                    {
                     direction || 'top' }} of the page</p>
         ---------------------------------------
         app.directive('pin', {
                    
          mounted(el, binding) {
                    
            el.style.position = 'fixed'
            const s = binding.arg || 'top'
            el.style[s] = binding.value + 'px'
          }