vue3中setup函数

热爱可抵岁月mrx

已于 2022-08-01 11:28:59 修改

阅读量2.6k

点赞数

分类专栏： web前端文章标签： java 前端服务器

于 2022-07-29 16:30:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_55695208/article/details/126028517

版权

web前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍了Vue3的setup函数及其在生命周期中的位置，强调了setup中不能直接使用data和methods。同时，讲解了isRef和unRef的使用，以及Vue生命周期、keep-alive、vue-resource、rem、z-index、动态绑定样式和Vue中获取URL参数、nextTick、require引入图片、获取元素高度以及$refs的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 这两个生命周期钩子函数将会被对应执行。

vue-resource

vue-resource依赖与vue，导入时注意先后顺序

成功回调必填，失败回调可选

另外vue3暂无法使用vue-resource发送http请求。建议使用axios

rem

rem就是与根元素(html)的比例。1rem也为30px，2rem就为60px。

justify-content: center是水平居中
align-items:center垂直居中

注意写法

z-index属性的使用

用途:
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。

注意:
z-index 属性值可以是负的, 如果为正数，则离用户更近，为负数则表示离用户更远。

z-index 仅能在定位元素上奏效（position:relative/absolute/fixed;）

在vue项目里，token是用来当作前端和服务器通信的标识。经过登录页面后，每次发起的请求都需要携带上它，给服务器进行认证。

vue3动态绑定样式之函数篇

<template>

<h1  :style="test(value)">哈哈哈</h1>
</template>

<script>
export default {
  data(){
    return {
        value:1
    }
  
  },
   methods:{
    test(value){
      if(value == 1)
      {
        return {
            background:'yellow',  
        }
      }
    }
   }
};

</script>

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

this.$nextTick

vue的更新是异步的，当我们不加this.$nextTick时，点击第一次得到的是旧值，第二次点击才恢复正确，为解决这种情况，可使用this.$nextTick

letter-spacing:5px 字符间距属性

require 引图片路径

require 是 node 中的一个方法，他的作用是 “用于引入模块、 JSON、或本地文件”。也就是说如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。而如果使用字符串的话，那么则是一个 string 类型的固定字符串路径。

我们知道，src 中引入的图片应该为图片的本身路径（相对路径或者绝对路径），而 vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的字符串路径则无法找到该图片，所以需要使用 require 方法来返回图片的编译路径。

简单的说，使用require定义之后，你就可以动态使用了，不用require你就只能写死的。不用的话， :src="’…/img/image.jpg’" 会被解析为字符串