Vue | Vue.js Composition API(二)

简介: Vue | Vue.js Composition API(二)

一、computed函数使用

computed

计算属性computed:当我们的某些属性是依赖其他状态时 可以使用计算属性处理


       在前面的Options API中 我们是使用computed选项来完成的


       在Composition API中 我们可以在setup函数中使用computed方法来编写一个计算属性;


如何使用computed?


       方式一: 接收一个getter函数 并为getter函数返回值 返回一个不变的ref对象


       方式二: 接收一个具有get 和 set的对象 返回一个可变的(可读写的)ref对象

JavaScript
const fullName = computed(()=>{
  return names.firstName + " " + names.lastName
})

657574347633423a8588218374c9249a.png

setup中使用ref

在setup中如何使用ref获取元素或者组件?


       我们只需要定义一个ref对象,绑定到元素或组件的ref属性上即可;

f87a1ebc1bf140b199692f03d5dca4db.png

二、组件的生命周期函数

生命周期钩子

前面说过setup可以替代data methods ...这些选项 也可以替代 生命周期钩子(函数)


那么setup中如何使用生命周期函数呢?


       可以使用直接导入的onXX函数注册生命周期钩子

fbeff990d36745bcb0f040b5705d57ad.png

三、Provide/Inject使用

Provide函数

在Composition API也可以替代之前的Provide和Inject的选项


我们可以通过provide来提供数据:


       通过provide方法来定义每个Property


provide可以传入两个参数:


       Name: 提供的属性名称


       Value: 提供的属性值

JavaScript
const name = ref("xiong")
provide("name",name)
provide("age",18)

inject函数

在 后代组件 中可以通过 inject 来注入需要的属性和对应的值


       可以通过 inject 来注入需要的内容


inject可以传入两个参数:


       要inject的property的name;


       默认值

JavaScript
const name = inject("name")
const age = inject("age")
const height = inject("height",1.88)

数据的响应式

       为了增加 provide值和inject值之间的响应性,可以在provide值时使用ref和reactive

JavaScript
// 使用 ref 或者 reactive
const name = ref("xiong")
provide("name",name)
provide("age",18)

四、watch/watchEffect

侦听数据的变化

在Options API中,我们可以通过 watch选项 侦听 data或props的数据变化,当数据变化时 执行某一些操作.


在Composition API中 我们可以使用 watchEffect和watch来完成响应式数据的侦听


       watchEffect:用于自动收集响应式数据的依赖


       watch:需要手动指定侦听的数据源

Watch的使用

watch的API完全等同于组件的watch选项:


       watch需要 侦听特定的数据源,并且执行其回调函数


       默认情况下,它是惰性的,只有当侦听的源发生变化时 才会执行回调

fb0229b749c34b40a05deece59f8c40c.png

侦听多个数据源

侦听器可以使用数组同时侦听多个源:

e1f855d6cc754547aec2fd935f55759a.png

watch的选项

如果希望侦听一个深层的侦听,需要设置deep为true 也可以传入 immediate 立即执行

JavaScript
const info = reactive({
  name:"xiong",
  age:18
})
//  默认绑定 深度侦听
watch(info,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
},{
  immediate:true // 默认执行一次侦听
})
// 侦听reactive 数据变化后,获取普通对象
//  内部 执行 () =>info 这个函数 收集依赖
//  这样 就可以给我们普通对象了
watch(()=> ({...info}),(newValue,oldValue)=>{
  console.log(newValue,oldValue)
},{
  immediate:true,
  deep:true
})

watchEffect

当侦听到某些响应式数据发生变化时 希望执行某些操作 这个时候可以使用watchEffect


       watchEffect传入的函数会立即执行一次,并且在执行的过程中会收集依赖


       只有收集的依赖发生变化时 watchEffect传入的函数才会再次执行

JavaScript
const counter = ref(0)
const names = ref("xiong")
// 1 watchEffect 传入 回调函数 默认 会被自动执行
// 2 在执行的过程中,会自动的收集依赖(依赖哪些响应式的数据 就收集哪些)
watchEffect(()=>{
  console.log("-----------",counter.value,names.value)
})

watchEffect的停止侦听

JavaScript
// 当我们的counter达到时的时候 我想要停止监听 怎么实现?
//  watchEffect 是有返回值的
// 实现了
const stopWatch = watchEffect(()=>{
  console.log("-----------",counter.value,names.value)
//  再里面进行判断  counter.value>10
  if(counter.value >= 10){
    stopWatch()
  }
})

五、自定义HOOK练习

useCounter

fbe64b54499747e2bb52264e62b9fd6b.png

useTitle

e78700d4691144d5b7b5419028ed65e6.png

useScrollPosition

获取当前window的滚动位置

36fb2d34e9aa46d89143c40c52763354.png

六、script setup语法糖

Script setup语法

是在单文件组件(SFC)中使用组合式API的编译时语法糖,当同时使用SFC与组合式API时则推荐该语法.</strong></div><div><br /></div><div>        更少的样板内容,更简洁的代码.</div><div><br /></div><div>        能够使用纯Typescript声明prop和抛出事件</div><div><br /></div><div>        更好的运行时性能</div><div><br /></div><div>        更好的IDE类型推断性能</div><div><br /></div><div style="text-align: left;"><strong>使用这个语法 将s</strong><strong>etup attribute 添加到 <script>代码块上:</strong></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22JavaScript%5Cn%3Cscript%20setup%3E%5Cn%20%20const%20msg%20%3D%20%5C%22Hello%20World%5C%22%5Cn%3C%2Fscript%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22jDctS%22%7D"></div><div>里面的代码会被编译成组件setup()函数的内容:</div><div><br /></div><div>        意味着与普通的script标签 只在组件被首次引入的时候执行一次不同;</div><div><br /></div><div>        <script setup>中的代码会在每次组件实例被创建的时候执行</div><h2 style="text-align: left;"><strong>顶层的绑定会被暴露给模板</strong></h2><div style="text-align: left;"><strong>当使用<script setup>的时候,任何在<script setup>声明的顶层的绑定(包括变量,函数声明,及import引入的内容)都能在模板中直接使用:</strong><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F43otk6qtr7yum_2969eb7fd23a45f583bc5fbdb646d093.png%22%2C%22originWidth%22%3A527%2C%22originHeight%22%3A367%2C%22name%22%3A%22c02c6acb174f40e3abdbe00478d95681.png%22%2C%22size%22%3A121754%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A527%2C%22height%22%3A367%7D"></span></div><div style="text-align: left;"><strong>响应式数据需要通过ref reactive来创建</strong></div><h2 style="text-align: left;"><a name="t22"></a><strong>导入的组件直接使用</strong></h2><div style="text-align: left;"><strong><script setup范围里的值也能被直接作为自定义组件的标签名使用:</strong></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22JavaScript%5Cn%3Ctemplate%3E%5Cn%20%20%3Cshow-info%3E%3C%2Fshow-info%3E%5Cn%3C%2Ftemplate%3E%5Cn%3Cscript%20setup%3E%5Cnimport%20ShowInfo%20from%20'.%2FShowInfo'%5Cn%3C%2Fscript%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22Ws29K%22%7D"></div><h2 style="text-align: left;"><strong>defineProps()和defineEmits()</strong></h2><div style="text-align: left;"><strong>为了在声明props和emits选项时 获得完整的类型推断支持,我们可以使用defineProps和defineEmits API 它们将自动地在<script setup>中可用</strong></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22JavaScript%5Cn%3Cscript%20setup%3E%5Cn%20%20%2F%2F%20%E5%AE%9A%E4%B9%89props%20defineProps%E6%8E%A5%E6%94%B6%20%20%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%5Cn%20%20const%20props%20%3D%20defineProps(%7B%5Cn%20%20%20%20name%3A%7B%5Cn%20%20%20%20%20%20type%3AString%2C%5Cn%20%20%20%20%20%20default%3A%5C%22%E9%BB%98%E8%AE%A4%E5%80%BC%5C%22%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20age%3A%7B%5Cn%20%20%20%20%20%20type%3ANumber%2C%5Cn%20%20%20%20%20%20default%3A0%5Cn%20%20%20%20%7D%5Cn%20%20%7D)%5Cn%20%20%2F%2F%20%E7%BB%91%E5%AE%9A%E5%87%BD%E6%95%B0%2C%E5%B9%B6%E4%B8%94%E5%8F%91%E5%87%BA%E4%BA%8B%E4%BB%B6%5Cn%20%20%2F%2F%20emits%5Cn%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%20emits%20%20%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E4%B8%9C%E8%A5%BF%E7%BB%99%20emits%5Cn%20%20%20%20const%20emits%20%3D%20defineEmits(%5B%5C%22showInfoBtnClick%5C%22%5D)%5Cn%20%20%20%20function%20showInfoBtnClick()%7B%5Cn%20%20%20%20%20%20%2F%2F%20%E8%B0%83%E7%94%A8%20emits%E8%BF%99%E4%B8%AA%E5%87%BD%E6%95%B0%5Cn%20%20%20%20%20%20emits(%5C%22showInfoBtnClick%5C%22%2C%5C%22showInfo%E5%86%85%E9%83%A8%E5%8F%91%E7%94%9F%E4%BA%86%E7%82%B9%E5%87%BB%5C%22)%5Cn%20%20%20%20%7D%5Cn%3C%2Fscript%3E%5Cn%2F%2F%20APP%E4%B8%AD%5Cn%3Cshow-info%20name%3D%5C%22xiong%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%3Aage%3D%5C%2218%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%40showInfoBtnClick%3D%5C%22showInfoBtnClick%5C%22%3E%5Cn%3C%2Fshow-info%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22u2KpP%22%7D"></div><h2 style="text-align: left;"><strong>defineExpose()</strong></h2><div style="text-align: left;"><strong>使用<script setup>的组件是默认关闭的:</strong></div><div><br /></div><div>        通过模板 ref 或$parent 链 获取到的组件的公开实例,不会暴露任何在<script setup>中声明的绑定.</div><div><br /></div><div style="text-align: left;"><strong>通过defineExpose编</strong><strong>译器 宏来显示指定在<script setup>组件中要暴露出去的property</strong></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22JavaScript%5Cn%20%20%20%20function%20foo()%7B%5Cn%20%20%20%20%20%20console.log(%5C%22foo%20function%5C%22)%5Cn%20%20%20%20%7D%5Cn%20%20%20%20defineExpose(%7B%5Cn%20%20%20%20%20%20foo%5Cn%20%20%20%20%7D)%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22fkskq%22%7D"></div>

相关文章
|
23小时前
VUE.初始化项目报错缺少core-js
VUE.初始化项目报错缺少core-js
8 0
|
2天前
|
JavaScript
Vue中的mixin和extend有什么区别?
Vue中的mixin和extend有什么区别?
9 0
|
2天前
|
JavaScript
Vue中的$nextTick方法的作用是什么?举例说明
Vue中的$nextTick方法的作用是什么?举例说明
10 1
|
2天前
|
JavaScript
在Vue中,如何实现生命周期钩子函数的多态?
在Vue中,如何实现生命周期钩子函数的多态?
5 0
|
2天前
|
JavaScript
在Vue中,如何使用自定义指令?
在Vue中,如何使用自定义指令?
10 1
|
2天前
|
缓存 JavaScript
Vue中的动态组件是什么?如何使用?
Vue中的动态组件是什么?如何使用?
7 1
|
3天前
|
资源调度 JavaScript 开发者
百度搜索:蓝易云【vue使用nuxt.js详情】
通过以上简要详情,你可以快速上手Nuxt.js,并利用其强大的服务端渲染能力构建通用、高性能的Vue.js应用。买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
21 8
|
13天前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
13天前
|
JavaScript 前端开发 编译器
Vue 模板是如何编译的?
Vue 模板是如何编译的?
16 0

相关产品

  • 云迁移中心