vue3中setup函数

目录

isRef 和 unRef

Vue生命周期

keep-alive标签

vue-resource

rem

z-index属性的使用

vue3动态绑定样式之函数篇

Vue中使用getUrlParam()方法来获取URL的值

this.$nextTick

require 引图片路径

获取元素高度

this.$refs的使用在vue中ref可以以属性的形式添加给标签或者组件

---

Vue3 的一大特性函数 ---- setup

setup函数是处于 生命周期函数 beforeCreate 和 Created 之前的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
setup函数是 Composition API（组合API）的入口
在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法在模板中使用,在setup执行的时候，组件对象还没有创建，组件实例对象this还不可用，此时this是undefined，不能通过this来访问。

 

isRef 和 unRef

实现一下两个ref的工具函数 isRef 和 unRef

isRef是判断对象是否是ref，使用时是否要用ref.value

unRef 可以直接使用ref，而不再 .value

Vue生命周期

本质上，每个主要Vue生命周期事件被分成两个钩子，分别在事件之前和之后调用。Vue应用程序中有4个主要事件(8个主要钩子)。

• 创建 — 在组件创建时执行
• 挂载 — DOM 被挂载时执行
• 更新 — 当响应数据被修改时执行
• 销毁 — 在元素被销毁之前立即运行

 Vue3 就是要用它的 组合 API，在组合API中，我们需要将生命周期钩子导入到项目中，才能使用，这有助于保持项目的轻量性。

// 组合 API
import { onMounted } from 'vue'

keep-alive标签

keep-alive包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素,当组件在 keep-alive内被切换，组件里的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。