Vue3官网-可复用&组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件

最新推荐文章于 2024-05-29 11:19:25 发布

ChrisP3616

最新推荐文章于 2024-05-29 11:19:25 发布

阅读量922

点赞数 2

分类专栏：前端工程师1——汇总前端工程师7——Vue3、Router、CLI、VueX 文章标签： javascript vue.js

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

版权

Vue3官网-可复用&组合式API（十四）实例 property（$slots，$attrs）、渲染函数render(虚拟节点VNode，`h()` 参数，使用JavaScript代替模板功能)，插件（编写，创建插件）

文章目录

Vue3官网-可复用&组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，`h()` 参数，使用JavaScript代替模板功能)，插件（编写，创建插件）
- 1. 实例 property
- - $data
  - $props
  - $el
  - $options
  - $parent
  - $root
  - $slots
  - $refs
  - $attrs
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 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
实例 property

$el

组件实例正在使用的根 DOM 元素。

$parent

父实例，如果当前实例有的话。

$slots

用来以编程方式访问通过插槽分发的内容。每个具名插槽都有其相应的 property (例如：v-slot:foo 中的内容将会在 this.$slots.foo() 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。

$refs

一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

$attrs

包含了父作用域中不作为组件 props 或自定义事件的 attribute 绑定和事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——这在创建高阶的组件时会非常有用。
渲染函数(render)
概述
Vue 推荐在绝大多数情况下使用模板<template>来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
app.component('anchored-heading', {
          
  render() {
          
    return h(
      'h' + this.level, // 标签名
      {
          }, // prop 或 attribute
      this.$slots.default() // 包含其子节点的数组
    )
  },
  props: {
          
    level: {
          
      type: Number,
      required: true
    }
  }
虚拟节点VNode

h() 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为 VNode。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
h() 参数
h() 函数是一个用于创建 VNode 的实用程序。也许可以更准确地将其命名为 createVNode()，但由于频繁使用和简洁，它被称为 h() 。

三个参数（最重要）

{String | Object | Function} tag 一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。必需的

{Object} props与 attribute、prop 和事件相对应的对象。这会在模板中用到。可选的，通常没有时直接跳过显示第三个参数，也可以用Null表示

{String | Array | Object} children子 VNodes, 使用 h() 构建,或使用字符串获取 “文本 VNode” 或者有插槽的对象。可选的，当没有第二个参数时，就显示在第二位
举例如下，h()的第一个参数就是VNode的组件名：
 [
    'Some text comes first.',
    h('h1', 'A headline'),
    h(MyComponent, {
          
      someProp: 'foobar'
    })
  ]
创建VNode
传递给 h 的第一个参数应该是组件本身。
解析组件
render 函数通常只需要对全局注册的组件使用 resolveComponent。
render() {
            
  return h(resolveComponent('ButtonCounter'))
}
而对于局部注册的却可以跳过，请看下面的例子：
render() {
            
  return h(ButtonCounter)
}
使用JavaScript代替模板功能
v-if 和 v-for

在渲染函数中用 JavaScript 的 if/else 和 map() 来重写

v-model 指令

扩展为 modelValue 和 onUpdate:modelValue 在模板编译过程中，我们必须自己提供这些 prop

v-on

例如，要处理 click 事件，prop 名称应该是 onClick。
事件修饰符

.passive 、.capture 和 .once 事件修饰符，可以使用驼峰写法将他们拼接在事件名后面：
render() {
          
  return h('input', {
          
    onClickCapture: this.doThisInCapturingMode,
    onKeyupOnce: this.doThisOnce,
    onMouseoverOnceCapture: this.doThisOnceInCapturingMode
  })
}
修饰符处理函数中的等价操作

.stop event.stopPropagation()

.prevent event.preventDefault()

.self if (event.target !== event.currentTarget) return

按键： .enter, .13 if (event.keyCode !== 13) return (对于别的按键修饰符来说，可将 13 改为另一个按键码

修饰键： .ctrl, .alt, .shift, .meta if (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey, shiftKey, 或 metaKey)
插槽
通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组
要使用渲染函数将插槽传递给子组件:
const {
             h, resolveComponent } = Vue

render() {
            
  // `<div><child v-slot="props"><span>{
            { props.text }}</span></child></div>`
  return h('div', [
    h(
      resolveComponent('child'),
      {
            },
      // 将 `slots` 以 { name: props => VNode | Array<VNode> } 的形式传递给子对象。
      {
            
        default: (props) => Vue.h('span', props.text)
      }
    )
  ])
}
is attribute

模板使用 resolveDynamicComponent 来实现 is attribute。

自定义指令

可以使用 withDirectives 将自定义指令应用于 VNode
React JSX
React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

它是类型安全的，在编译过程中就能发现错误。

使用 JSX 编写模板更加简单快速。
我们先看下以下代码：
const element = <h1>Hello, world!</h1>;
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。

它被称为 JSX，一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。

JSX 是在 JavaScript 内部实现的。

我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。
函数是组件 FunctionalComponent

Vue 会把 props 当作第一个参数传入

第二个参数 context 包含三个 property：attrs、emit 和 slots。它们分别相当于实例的 $attrs、$emit 和 $slots 这几个 property。

修饰符	处理函数中的等价操作
`.stop`	`event.stopPropagation()`
`.prevent`	`event.preventDefault()`
`.self`	`if (event.target !== event.currentTarget) return`
按键： `.enter`, `.13`	`if (event.keyCode !== 13) return` (对于别的按键修饰符来说，可将 13 改为另一个按键码
修饰键： `.ctrl`, `.alt`, `.shift`, `.meta`	`if (!event.ctrlKey) return` (将 `ctrlKey` 分别修改为 `altKey`, `shiftKey`, 或 `metaKey`)

1. 实例 property

$data

类型：Object
详细：

组件实例正在侦听的数据对象。组件实例代理了对其 data 对象 property 的访问。
参考：选项 / 数据 - data

$props

类型：Object
详细：

当前组件接收到的 props 对象。组件实例代理了对其 props 对象 property 的访问。

$el

类型：any
仅可读
详细：

组件实例正在使用的根 DOM 元素。

对于使用了片段的组件，$el 是占位 DOM 节点，Vue 使用它来跟踪组件在 DOM 中的位置。建议使用模板引用来直接访问 DOM 元素，而不是依赖于 $el。

$options

类型：Object
仅可读

详细：

用于当前组件实例的初始化选项。当你需要在选项中包含自定义 property 时会有用处：

const app = createApp({
     
  customOption: 'foo',
  created() {
     
    console.log(this.$options.customOption) // => 'foo'
  }
})

$parent

类型：Vue instance
仅可读
详细：

父实例，如果当前实例有的话。

$root

类型：Vue instance
仅可读
详细：

当前组件树的根组件实例。如果当前实例没有父实例&#x

最低0.47元/天解锁文章

ChrisP3616

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue3官网-可复用&组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件

Vue3官网-可复用&组合式API（四）实例 property（$slots，$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件（编写，创建插件）文章目录Vue3官网-可复用&组合式API（四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，`h()` 参数，使用JavaScript代替模板功能)，插件（编写，创建插件）1. 实例 property$data$props$e
复制链接

扫一扫