vue3常用的API使用简介

vue3.x已经发布了这么久,相关的生态也慢慢起来了,包括vite这个新的打包工具,在vue3.0学习过程中有一些实用性的api对比,希望能在开发中给大家做个示范,准确的使用对应的api去完成我们的项目开发

生命周期的变更

要特别说明一下的就是,setup 函数代替了 beforeCreate 和 created 两个生命周期函数,因此我们可以认为它的执行时间在beforeCreate 和 created 之间

Vue2 Vue3
beforeCreate setup
created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestory onBeforeUnmount
destoryed onUnmounted

了解过vue3的小伙伴儿都知道,现在使用都会用到setup函数,关于在setup函数操作数据,我们用例子说明会好一点

reactive

reactive 方法是用来创建一个响应式的数据对象,该API也很好地解决了Vue2通过 defineProperty 实现数据响应式的缺陷

用法很简单,只需将数据作为参数传入即可

<template>
 <div id="app">
 <!-- 4. 访问响应式数据对象中的 count -->
 {{ state.count }}
 </div>
</template>

<script>
// 1. 从 vue 中导入 reactive
import {reactive} from 'vue'
export default {
 name: 'App',
 setup() {
 // 2. 创建响应式的数据对象
 const state = reactive({count: 3})

 // 3. 将响应式数据对象state return 出去,供template使用
 return {state}
 }
}
</script>

ref

在介绍 setup 函数时,我们使用了 ref 函数包装了一个响应式的数据对象,这里表面上看上去跟 reactive 好像功能一模一样啊,确实差不多,因为 ref 就是通过 reactive 包装了一个对象 ,然后是将值传给该对象中的 value 属性,这也就解释了为什么每次访问时我们都需要加上 .value

我们可以简单地把 ref(obj) 理解为这个样子 reactive({value: obj})

<script>
import {ref, reactive} from 'vue'
export default {
 name: 'App',
 setup() {
 const obj = {count: 3}
 const state1 = ref(obj)
 const state2 = reactive(obj)

 console.log(state1)
 console.log(state2)
 }

}
</script>

注意: 这里指的 .value 是在 setup 函数中访问 ref 包装后的对象时才需要加的,在 template 模板中访问时是不需要的,因为在编译时,会自动识别其是否为 ref 包装过的

那么我们到底该如何选择 ref 和 reactive 呢?
建议:

  1. 基本类型值(String 、Nmuber 、Boolean 等)或单值对象(类似像 {count: 3} 这样只有一个属性值的对象)使用 ref
  2. 引用类型值(Object 、Array)使用 reactive

我们在vue2.x中获取元素标签是用 ref ,vue3.x我们要获取元素标签怎么办呢?

<template>
 <div>
 <div ref="el">div元素</div>
 </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
 setup() {
 // 创建一个DOM引用,名称必须与元素的ref属性名相同
 const el = ref(null)

 // 在挂载后才能通过 el 获取到目标元素
 onMounted(() => {
  el.value.innerHTML = '内容被修改'
 })

 // 把创建的引用 return 出去
 return {el}
 }
}
</script>

获取元素的操作一共分为以下几个步骤:

  1. 先给目标元素的 ref 属性设置一个值,假设为 el
  2. 然后在 setup 函数中调用 ref 函数,值为 null,并赋值给变量 el,这里要注意,该变量名必须与我们给元素设置的 ref 属性名相同
  3. 把对元素的引用变量 el 返回(return)出去

补充:设置的元素引用变量只有在组件挂载后才能访问到,因此在挂载前对元素进行操作都是无效的
当然如果我们引用的是一个组件元素,那么获得的将是该组件的实例对象

toRef

toRef 是将某个对象中的某个值转化为响应式数据,其接收两个参数,第一个参数为 obj 对象;第二个参数为对象中的属性名

<script>
// 1. 导入 toRef
import {toRef} from 'vue'
export default {
 setup() {
  const obj = {count: 3}
  // 2. 将 obj 对象中属性count的值转化为响应式数据
  const state = toRef(obj, 'count')

  // 3. 将toRef包装过的数据对象返回供template使用
  return {state}
 }
}
</script>

上面又有个ref,又有个toRef,不是冲突了吗?两个有不一样的功效:

<template>
 <p>{{ state1 }}</p>
 <button @click="add1">增加</button>

 <p>{{ state2 }}</p>
 <button @click="add2">增加</button>
</template>

<script>
import {ref, toRef} from 'vue'
export default {
 setup() {
  const obj = {count: 3}
  const state1 = ref(obj.count)
  const state2 = toRef(obj, 'count')

  function add1() {
   state1.value ++
   console.log('原始值:', obj);
   console.log('响应式数据对象:', state1);
  }

  function add2() {
   state2.value ++
   console.log('原始值:', obj);
   console.log('响应式数据对象:', state2);
  }

  return {state1, state2, add1, add2}
 }
}
</script>

ref 是对原数据的一个拷贝,不会影响到原始值,同时响应式数据对象值改变后会同步更新视图
toRef 是对原数据的一个引用,会影响到原始值,但是响应式数据对象值改变后会不会更新视图

toRefs

将传入的对象里所有的属性的值都转化为响应式数据对象,该函数支持一个参数,即 obj 对象

<script>
// 1. 导入 toRefs
import {toRefs} from 'vue'
export default {
 setup() {
  const obj = {
   name: '前端印象',
   age: 22,
   gender: 0
  }
  // 2. 将 obj 对象中属性count的值转化为响应式数据
  const state = toRefs(obj)

  // 3. 打印查看一下
  console.log(state)
 }
}
</script>

返回的是一个对象,对象里包含了每一个包装过后的响应式数据对象

shallowReactive

听这个API的名称就知道,这是一个浅层的 reactive,难道意思就是原本的 reactive 是深层的呗,没错,这是一个用于性能优化的API

<script>
<template>
 <p>{{ state.a }}</p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change1">改变1</button>
 <button @click="change2">改变2</button>
</template>
<script>
import {shallowReactive} from 'vue'
export default {
 setup() {
  const obj = {
   a: 1,
   first: {
   b: 2,
   second: {
    c: 3
   }
   }
  }

  const state = shallowReactive(obj)

  function change1() {
   state.a = 7
  }

  function change2() {
   state.first.b = 8
   state.first.second.c = 9
   console.log(state);
  }

  return {state}
 }
}
</script>

首先我们点击了第二个按钮,改变了第二层的 b 和第三层的 c,虽然值发生了改变,但是视图却没有进行更新;

当我们点击了第一个按钮,改变了第一层的 a 时,整个视图进行了更新;

由此可说明,shallowReactive 监听了第一层属性的值,一旦发生改变,则更新视图

shallowRef

这是一个浅层的 ref,与 shallowReactive 一样是拿来做性能优化的,配合triggerRef ,调用它就可以立马更新视图,其接收一个参数 state ,即需要更新的 ref 对象

shallowReactive 是监听对象第一层的数据变化用于驱动视图更新,那么 shallowRef 则是监听 .value 的值的变化来更新视图的

<template>
 <p>{{ state.a }}</p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change">改变</button>
</template>

<script>
import {shallowRef, triggerRef} from 'vue'
export default {
 setup() {
  const obj = {
   a: 1,
   first: {
   b: 2,
   second: {
    c: 3
   }
   }
  }

  const state = shallowRef(obj)
  console.log(state);

  function change() {
   state.value.first.b = 8
   state.value.first.second.c = 9
   // 修改值后立即驱动视图更新
   triggerRef(state)
   console.log(state);
  }

  return {state, change}
 }
}
</script>

toRaw

toRaw 方法是用于获取 ref 或 reactive 对象的原始数据的

<script>
import {reactive, toRaw} from 'vue'
export default {
 setup() {
  const obj = {
   name: '前端印象',
   age: 22
  }

  const state = reactive(obj)
  const raw = toRaw(state)

  console.log(obj === raw) // true
 }
}
</script>

上述代码就证明了 toRaw 方法从 reactive 对象中获取到的是原始数据,因此我们就可以很方便的通过修改原始数据的值而不更新视图来做一些性能优化了

注意: 补充一句,当 toRaw 方法接收的参数是 ref 对象时,需要加上 .value 才能获取到原始数据对象

markRaw

markRaw 方法可以将原始数据标记为非响应式的,即使用 ref 或 reactive 将其包装,仍无法实现数据响应式,其接收一个参数,即原始数据,并返回被标记后的数据。即使我们修改了值也不会更新视图了,即没有实现数据响应式

<template>
 <p>{{ state.name }}</p>
 <p>{{ state.age }}</p>
 <button @click="change">改变</button>
</template>

<script>
import {reactive, markRaw} from 'vue'
export default {
 setup() {
  const obj = {
   name: '前端印象',
   age: 22
  }
  // 通过markRaw标记原始数据obj, 使其数据更新不再被追踪
  const raw = markRaw(obj)
  // 试图用reactive包装raw, 使其变成响应式数据
  const state = reactive(raw) 

  function change() {
   state.age = 90
   console.log(state);
  }

  return {state, change}
 }
}
</script>

watchEffect

watchEffect 它与 watch 的区别主要有以下几点:

  1. 不需要手动传入依赖
  2. 每次初始化时会执行一次回调函数来自动获取依赖
  3. 无法获取到原值,只能得到变化后的值
<script>
import {reactive, watchEffect} from 'vue'
export default {
 setup() {
   const state = reactive({ count: 0, name: 'zs' })

   watchEffect(() => {
   console.log(state.count)
   console.log(state.name)
   /* 初始化时打印:
     0
     zs

   1秒后打印:
     1
     ls
   */
   })

   setTimeout(() => {
   state.count ++
   state.name = 'ls'
   }, 1000)
 }
}
</script>

没有像 watch 方法一样先给其传入一个依赖,而是直接指定了一个回调函数

当组件初始化时,将该回调函数执行一次,自动获取到需要检测的数据是 state.count 和 state.name

根据以上特征,我们可以自行选择使用哪一个监听器

getCurrentInstance

我们都知道在Vue2的任何一个组件中想要获取当前组件的实例可以通过 this 来得到,而在Vue3中我们大量的代码都在 setup 函数中运行,并且在该函数中 this 指向的是undefined,那么该如何获取到当前组件的实例呢?这时可以用到另一个方法,即 getCurrentInstance

<template>
 <p>{{ num }}</p>
</template>
<script>
import {ref, getCurrentInstance} from 'vue'
export default {
 setup() {
  const num = ref(3)
  const instance = getCurrentInstance()
  console.log(instance)

  return {num}
 }
}
</script>

instance 中重点关注 ctx 和 proxy 属性,这两个才是我们想要的 this。可以看到 ctx 和 proxy 的内容十分类似,只是后者相对于前者外部包装了一层 proxy,由此可说明 proxy 是响应式的

useStore

在Vue2中使用 Vuex,我们都是通过 this.$store 来与获取到Vuex实例,但上一部分说了原本Vue2中的 this 的获取方式不一样了,并且我们在Vue3的 getCurrentInstance().ctx 中也没有发现 $store 这个属性,那么如何获取到Vuex实例呢?这就要通过 vuex 中的一个方法了,即 useStore

// store 文件夹下的 index.js
import Vuex from 'vuex'

const store = Vuex.createStore({
 state: {
  name: '前端印象',
  age: 22
 },
 mutations: {
  ……
 },
 ……
})

// example.vue
<script>
// 从 vuex 中导入 useStore 方法
import {useStore} from 'vuex'
export default {
 setup() {
  // 获取 vuex 实例
  const store = useStore()

  console.log(store)
 }
}
</script>

然后接下来就可以像之前一样正常使用 vuex 了

以上就是vue3常用的API使用简介的详细内容,更多关于vue 常用的api使用的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vue3新特性之在Composition API中使用CSS Modules

    在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法. 首先来看看什么是 CSS Modules: CSS Modules CSS Modules 是一种 CSS 的模块化和组合系统.vu

  • 浅谈Vue3 Composition API如何替换Vue Mixins

    想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性. 回顾Mixins功能 让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位. 通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性--诸如 data,m

  • 精读《Vue3.0 Function API》

    1. 引言 Vue 3.0 的发布引起了轩然大波,让我们解读下它的 function api RFC详细了解一下 Vue 团队是怎么想的吧! 首先官方回答了几个最受关注的问题: Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草案试图这么做,但由于用户反馈太猛,被撤回了. Vue 3.0 的设计盖棺定论了吗? 没有呀,这次精读的稿子就是 RFC(Reques

  • 详解Vue3 Composition API中的提取和重用逻辑

    Vue3 Composition API可以在大型项目中更好地组织代码.然儿,随着使用几种不同的选项属性切换到单一的setup 方法,许多开发人员面临的问题是-- 这会不会更混乱,因为一切都在一个方法中 乍一看可能很容易,但是实际上只需要花一点点时间来编写可重用的模块化代码. 让我们来看看如何做到这一点. 问题 Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法 export default { data () { return { articles: [], se

  • WebStorm无法正确识别Vue3组合式API的解决方案

    1 问题描述 Vue3的组合式API无法在WebStorm中正确识别,表现为defineComponent等无法被识别: 2 尝试方案 猜想这种问题的原因是无法正确识别对应的Vue3库,笔者相信WebStorm是可以做到的,只是某些配置没有正确,笔者尝试过在设置的Libraries中勾选上node_modules,但是没有效果. 3 解决办法 最终的解决办法参考了此处(图源): 选择node_modules文件夹,右键选择Mark Directory as,最后选择Not Excluded即可.

  • vue3.0 的 Composition API 的使用示例

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面,事件都放在methods 里面,代码少的话还好分辨,如果代码多了,看着就头疼了. 现在vue3.0可以按照业务关系分成多个管理类来管理这些代码. 比如帖子列表+发帖功能,我们先做一个模板: (简单表示一下,不做美化处理了) <template> <div> 论坛列表 <div v

  • 浅谈Vue3.0新版API之composition-api入坑指南

    关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composition-api解决了什么问题 语法糖介绍 vite的安装使用 vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程,按照步骤安装即可 composition-api解决了什么问题 使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高

  • 详解vue3.0 的 Composition API 的一种使用方法

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面,事件都放在methods 里面,代码少的话还好分辨,如果代码多了,看着就头疼了. 现在vue3.0可以按照业务关系分成多个管理类来管理这些代码. 比如帖子列表+发帖功能,我们先做一个模板: (简单表示一下,不做美化处理了) <template> <div> 论坛列表 <div v

  • vue3常用的API使用简介

    vue3.x已经发布了这么久,相关的生态也慢慢起来了,包括vite这个新的打包工具,在vue3.0学习过程中有一些实用性的api对比,希望能在开发中给大家做个示范,准确的使用对应的api去完成我们的项目开发 生命周期的变更 要特别说明一下的就是,setup 函数代替了 beforeCreate 和 created 两个生命周期函数,因此我们可以认为它的执行时间在beforeCreate 和 created 之间 Vue2 Vue3 beforeCreate setup created setup

  • vue3常用响应式对象的api,你全用过了吗

    目录 Ⅰ. ref.reactive ( 递归监听 ) Ⅱ. isRef.isReactive ( 判断 ) Ⅲ. toRef 和 toRefs ( 解构 ) Ⅳ. toRaw . markRaw ( 解除代理) Ⅴ. unref ( 拷贝 ) Ⅵ. shallowRef .shallowReactive( 非递归监听 ) Ⅶ. triggerRef (强制更新) 总结 Ⅰ. ref.reactive ( 递归监听 ) import {ref,reactive} from 'vue'; setu

  • vue3中调用api接口实现数据的渲染以及详情方式

    目录 调用api接口实现数据的渲染及详情 vue3常用api梳理 setup参数 生命周期 响应式数据 ref.reactive coumputed watch && watchEffect 获取元素 this不可用 调用api接口实现数据的渲染及详情 首先新建一个项目 yarn create vite vue3-template --template vue 然后下载相应的api npm i axios router 首先配置 App.vue <script setup> &

  • sea.js常用的api简易文档

    本文罗列了seajs常用的api和代码示例,下面话不多说,来看看详细的介绍,有需要的朋友们可以参考借鉴. 一.seajs.config alias 别名配置,配置之后可在模块中使用require调用 require('jquery'); seajs.config({ alias: { 'jquery': 'jquery/jquery/1.10.1/jquery' } }); define(function(require, exports, module) { //引用jQuery模块 var

  • 基于JavaScript操作DOM常用的API小结

    前言 DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口).DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 脱胎于 Netscape 及微软公司创始的 DHTML(动态 HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 阅读目录 基本概念 节点创建型api 页面修改型API 节点查询型API 节点关系型api 元素属性型api 元素样式型api 总结 文本整

  • tensorflow常用函数API介绍

    摘要:本文介绍了tensorflow的常用函数. 1.tensorflow常用函数 TensorFlow 将图形定义转换成分布式执行的操作, 以充分利用可用的计算资源(如 CPU 或 GPU.一般你不需要显式指定使用 CPU 还是 GPU, TensorFlow 能自动检测.如果检测到 GPU, TensorFlow 会尽可能地利用找到的第一个 GPU 来执行操作. 并行计算能让代价大的算法计算加速执行,TensorFlow也在实现上对复杂操作进行了有效的改进.大部分核相关的操作都是设 备相关的

  • Dockerfile常用命令的使用简介

    之前的文章中,我们已经说了RUN.FROM.MAINTAINER.EXPOSE等一些DockerFile的相关命令,今天我们来看DockerFile的其他命令介绍. 01 CMD CMD命令用于指定一个容器启动的时候需要运行的命令.它和RUN指令有点类似,但是不同之处在于: RUN指令是镜像被构建的时候,需要执行的命令: CMD指令是指定容器被启动的时候,要运行的指令.举例: docker run -it container_name /bin/ls 这个命令是我们启动一个容器,并且运行/bin

  • Vue3常用的通讯方式总结与实例代码

    目录 前言 props $emit EventBus v-model expose / ref provide / inject 插槽 slot 普通插槽 具名插槽 作用域插槽 结语 前言 Vue3更新了很久了,但是之前项目都是用Vue2写的,最近去官网look了一波,在这里总结一下Vue3常用的通讯方式.尤大大,不要再更新了,真的学不动了. 本文用的是Vue3.2版本的setup语法糖官网 props 父组件 <template> <div> <Child :msg=&qu

随机推荐