vue3学习笔记

自定义指令

1. 定义:

app.directive('name', {
  // 在元素的 attribute 或事件侦听器应用之前调用
  created(el, binding, vnode) {},
  // 指令绑定到元素后发生。只发生一次, 同2.x的bind
  beforeMount(el, binding, vnode) {},
  // 元素插入父 DOM 后发生, 同2.x的inserted
  mounted(el, binding, vnode) {},
  // 在元素本身更新之前调用的
  beforeUpdate(el, binding, vnode) {},
  // 一旦组件和子级被更新，就会调用这个钩子, 同2.x的componentUpdated
  updated(el, binding, vnode) {},
  // 在卸载元素之前调用
  beforeUnmount(el, binding, vnode) {},
  // 一旦指令被移除，就会调用这个钩子, 同2.x的unbind
  unmounted(el, binding, vnode) {},
})

2. <p v-name="'name'" />
3. 组件实例从binding.instance中取

定制内置元素

1. webpack识别

// webpack 中的配置
rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag === 'plastic-button'
      }
    }
  }
  // ...
]

2. 组件动态识别: app.config.isCustomElement = tag => tag === 'plastic-button'
3. 在component组件中is用法与2.x保持一致
4. 非component组件中会作为attrs传入组件中, 可用v-is实现原特性, 值为javascript识别的表达式

函数式组件

import { h } from 'vue'

const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots)
}

DynamicHeading.props = ['level']

export default DynamicHeading

等价的SFC写法

<template>
  <component
    v-bind:is="`h${$props.level}`"
    v-bind="$attrs"
  />
</template>

<script>
export default {
  props: ['level']
}
</script>

setup

setup是组合式api的核心, 当时SFC组件时返回对象, 公template使用, 当为函数组件时返回带渲染结果的函数, 如:

import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('button-counter')
    return () => h(ButtonCounter)
  }
}