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

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动态绑定样式之函数篇

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’" 会被解析为字符串

获取元素高度

$( ).height( );和$().css("height",)的区别
$().height()是不包含padding和margin的设置，而$().css("height"，)是包含的，和border-box是有点类似的效果

使用本方法需要安装jquery， 

vue中安装使用jquery_前端程序猿i的博客-CSDN博客_vue安装jquery

按此安装，可能报错，徐加上

const webpack = require('webpack')

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

ref 写在标签上时：this.$refs.ipt 获取的是添加了ref="ipt"标签对应的dom元素

ref 写在组件上时：this.$refs['component'] 获取到的是添加了ref="component"属性的这个组件