第二节: 了解 vue3 通用属性方法

1. version 版本

vue提供了一个通用API (version), 用于获取当前使用vue的版本.

示例:

import {version } from 'vue';

console.log('version', version)

version通用属性的使用方式就是从vue导入, 导入后的属性值就是当前使用vue的版本

2. nextTick

nextTick 如果你使用过Vue2 开发, 你是不是有种很熟悉的感觉, 在Vue2 中和nextTick 具有相同功能的就是$nextTick方法

在Vue2中, 我们通过组件的实例对象获取$nextTick, 具体使用为this.$nextTick(), 通过调用$nextTick()方法传入回调函数, 在页面下一次刷新完成后执行回调函数.

在Vue3中直接全局导出了nextTickAPI, 用于等待下一次 DOM 更新是执行回调函数, 就不用像vue2一样通过组件实例对象调用了

和$nextTick一样, nextTick通用方法调用时, 参数接收一个回调函数, vue在下一次DOM更新时调用回调函数

示例:

<template>
  <div>
    <div ref="oWrap" class="wrap" :style="{ width: wid }"></div>
    <button @click="change">修改宽度</button>
  </div>
</template>


<script  lang="ts">

import { defineComponent, version, ref, nextTick } from 'vue';


export default defineComponent({
  setup() {
    // 获取div dom节点对象
    const oWrap = ref()

    // div 宽度数据
    const wid = ref('200px')

    // 直接打印获取的dom 对象为null
    console.log(oWrap.value)

    // nextTick 下一次dom刷新时获取dom节点对象
    nextTick(() => {
      console.log(oWrap.value)  // div dom对象
    })

    // 修改宽度
    const change = () => {
      // 修改div 宽度
      wid.value = '400px'

      // 获取dom 对象的宽度为之前的值:200px, 因为此时dom还没有刷新
      console.log(oWrap.value.style.width)

      // dom刷新以后之后回调函数, 获取宽度: 400px
      nextTick(() => {
        console.log(oWrap.value.style.width)
      })
    }
    return { oWrap, wid, change }

  }
})
</script>

3. defineComponent

在定义 Vue 组件时提供类型推导的辅助函数。在理解defineComponent API 使用前,我们先分析一下单文件组件的导出方式

3.1 单文件组件导出渲染函数

vue 中单文件组件, 返回可以是组件对象, 也可以直接返回渲染函数

如果直接返回渲染函数, 那么template将失去意义, 因为有了渲染函数以后, vue不会再把template模板编译为渲染函数.
页面渲染的将是返回渲染函数执行后得到的虚拟DOM

示例:

<script  lang="ts">
import {  h } from 'vue';

// 直接返回渲染函数
export default () => {
  return h('div', null, 'hello')
}
</script>

运行效果:

image.png

可以看到没有template模板的vue组件也一样可以渲染内容, 渲染的就是渲染函数返回的vnode

3.2 单文件组件返回组件对象

其实比较常用的还是返回组件对象, 返回组件对象时,返回组件对象也有两种使用方式

可以直接在setup函数中返回渲染函数, 不使用template模板
也可以使用template模板, setup函数返回一个对象, 这个对象的所有数据将会加载到组件对象上

setup 钩子函数返回渲染函数
示例:

<script  lang="ts">

import {  h } from 'vue';

// 返回组件对象
export default {
  setup() {
    // setup 中返回渲染函数
    return () => {
      return h('div', null, 'hello')
    }
  }
}
</script>

使用template 模板, setup 钩子函数返回数据对象
示例:

<template>
    <div>{{ msg }}</div>
</template>

<script  lang="ts">

export default {
  setup() {
    // setup 返回数据
    return {
      msg: 'hello'
    }

  }
}
</script>

3.3 使用defineComponent时

defineComponent 函数接收两个参数:

第一个参数为组件选项对象或setup函数
第二个参数: 当第一个参数时setup函数时, 第一个参数为其他选项对象

如果第一个参数为组件选项对象(常用的写法)
示例:

<template>
  <div>{{ msg }}</div>
</template>

<script  lang="ts">
import { defineComponent } from 'vue';

// defineComponent 参数为组件选项对象
export default defineComponent({
  name: 'app',
  props: {
    msg: {
      type: String,
      default: 'hello'
    }
  },
  setup(props) {
    console.log('props', props)
    /*
      {
        msg:'hello'
      }
    */
  },

})
</script>

如果第一个参数为setup函数
示例:

<template>
  <div>{{ msg }}</div>
</template>

<script  lang="ts">
import { defineComponent } from 'vue';

// defineComponent 参数为setup函数,第二个参数为组件其他选项对象
export default defineComponent(
  // 第一个参数时setup函数
  (props) => {
    console.log('props', props)
    return {}
  },

  // 第二个参数是其他选项对象
  {
    name: 'app',
    props: {
      msg: {
        type: String,
        default: 'hello'
      }
    },

  }
)
</script>

第二节: 了解 vue3 通用属性方法