vue.js基础学习（组合式 API：setup() 基本使用）

已于 2022-08-24 18:31:39 修改
阅读量1.1k 收藏 1
点赞数
文章标签： 学习
于 2022-08-24 18:26:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58866450/article/details/126509741
版权

基础入门：vue.js 组合式 API：setup() 基本使用

1、在setup中使用watch

  • watch():侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
  • 详细信息：watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。第一个参数是侦听器的源。watch(侦听的响应式引用，回调函数)，这个来源可以是以下几种：
    • 一个函数，返回一个值
    • 一个 ref
    • 一个响应式对象
    • ...或是由以上类型的值组成的数组

    • 第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。

      当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

      第三个可选的参数是一个对象，支持以下这些选项：

    • immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
    • deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。
    • flush：调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。
    • onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。
  • watchEffect():立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。 

    • 第一个参数就是要运行的副作用函数。这个副作用函数的参数也是一个函数，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求 (参见下面的示例)。

    • 第二个参数是一个可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖。

      默认情况下，侦听器将在组件渲染之前执行。设置 flush: 'post' 将会使侦听器延迟到组件渲染之后再执行。详见回调的触发时机。在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器。这可以通过设置 flush: 'sync' 来实现。然而，该设置应谨慎使用，因为如果有多个属性同时更新，这将导致一些性能和数据一致性的问题。

    • 返回值是一个用来停止该副作用的函数。

  • watch()和watchEffect()的区别：

    • watchEffect()不需要指定监听的属性，自动收集依赖，只要在回调中引用响应式的属性，只要这些属性发生改变回调就会执行；watch()只能监听指定属性，做出回调函数的执行，从vue3开始可以监听多个。

    • watch()可以获得新值和旧值，watchEffect()不可以拿到。

    • watchEffect()在组件初始化的时候就会执行一次，用来收集依赖，watch()不需要，一开始就指定。 

 源代码：

<script>
  import Hello from './components/Hello.vue';
  import { ref,reactive, toRefs, watch, watchEffect,} from 'vue';//ref定义响应式变量，reactive 可以定义引用数据类型
  export default{
    data(){
      return{
        message:'hello word!'
      }
    },
    setup(){
      //counter逻辑代码
      const counter=ref(0)
      function changCoun(){
        counter.value++
      }
      //watch(侦听的响应式引用，回调函数)
      watch(counter,(newVal,oldVal)=>{
        console.log("newVal----",newVal);
        console.log("oldVal----",oldVal);
      })

      //use逻辑代码
      const use=reactive({
        name:'xueysr',
        age:18
      })
      function changeName(){
        use.name='x-ysr'
      }
      // watch(use,(newVal,oldVal)=>{
      //   console.log("newVal---",newVal);
      //   console.log("oldVal---",oldVal)
      // })
      //watchEffect(回调函数),不需要指定监听的属性，自动收集依赖
      watchEffect(()=>{
        console.log(use.name)
      })
      /*
      watch()和watchEffect()的区别
      1、watchEffect()不需要指定监听的属性，自动收集依赖，只要在回调中引用响应式的属性，只要这些属性发生改变回调就会执行
      watch()只能监听指定属性，做出回调函数的执行，从vue3开始可以监听多个。
      2、watch()可以获得新值和旧值，watchEffect()不可以拿到。
      3、watchEffect()在组件初始化的时候就会执行一次，用来收集依赖，watch()不需要，一开始就指定。
      */

      return{
        counter,
        use,
        changCoun,
        changeName
      }
    },
    //选项式API
    watch:{
      message:function(newVal,oldVal){

      }
    },
    components:{
      Hello
    }
  }

</script>

<template>
  <h2>{{counter}}</h2>
  <h2>{{use.name}}</h2>
  <button @click="changCoun">改变counter</button>
  <button @click="changeName">改变名字</button>
  <Hello></Hello>
</template>

<style>

</style>

2、生命周期钩子函数在setup中使用

  • onMounted()：注册一个回调函数，在组件挂载完成后执行。

  • onUpdated()：注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

  • onUnmounted()：注册一个回调函数，在组件实例被卸载之后调用。

  • onBeforeMount()：注册一个钩子，在组件被挂载之前被调用。

  • onBeforeUpdate()：注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

  • onBeforeUnmount()：注册一个钩子，在组件实例被卸载之前调用。

  • onErrorCaptured()：注册一个钩子，在捕获了后代组件传递的错误时调用。

  • onRenderTracked()注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

  • onRenderTriggered()：注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

  • onActivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。这个钩子在服务器端渲染期间不会被调用。

  • onDeactivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。这个钩子在服务器端渲染期间不会被调用。

  • onServerPrefetch()：注册一个异步函数，在组件实例在服务器上被渲染之前调用。

源代码： 

<script>
  import Hello from './components/Hello.vue';
  import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated} from 'vue';
  export default{
    data(){
      return{
        message:'hello word!'
      }
    },
    setup(){
      //生命周期钩子函数，函数中有一个参数和一个回调函数
      onBeforeMount(()=>{
        console.log('onBeforeMount')
      });
      onMounted(()=>{
        console.log('onMounted')
      });
      onBeforeUpdate(()=>{
        console.log('onBeforeUpdate')
      });
      onUpdated(()=>{
        console.log(' onUpdated')
      })
    }
  }

</script>

<template>
  
</template>

<style>

</style>

3、在setup中使用computed 

  • computed ():接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

源代码： 

<script>
  import Hello from './components/Hello.vue';
  import { ref,reactive, toRefs, watch, watchEffect, computed} from 'vue';//ref定义响应式变量，reactive 可以定义引用数据类型
  export default{
    data(){
      return{
        message:'hello word!'
      }
    },
    setup(){
      //msg逻辑代码
      const msg=ref('hello word!')
      const reverseMsg=computed(()=>{//返回一个带有value属性的对象
        return msg.value.split('').reverse().join('')
      })
      console.log(reverseMsg.value)
      return{
       msg,
       use
      }
    },
    //选项式API
    //  computed:{
    //   reverseMsg:function(){
    //     return this.message.split('').reverse().join('')
    //   }
    //  }
  }

</script>

<template>
  <h2>{{msg}}</h2>
</template>

<style>

</style>

4、在setup中使用props

  • setup 函数的第一个参数是组件的 props。和标准的组件一致，一个 setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新。

  • 如果你确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数。

源代码： 

<!-- App.vue -->
<script>
  import Hello from './components/Hello.vue';
  export default{
    data() {
        return {
            message: "hello word!"
        };
    },
    components: { Hello }
}

</script>

<template>
  <Hello :message="message"></Hello>
</template>

<style>

</style>

<!-- Hello.vue -->
<script>
  export default{
    data(){
      return{
        counter:0
      }
    },
    props:{
      message:{
        type:String,
        default:'你好'
      }
    },
    setup(props){
      console.log(props.message)
    },
    // mounted(){
    //   console.log(this.message)
    // }
  }
</script>

<template>
  <h2>{{message}}</h2>
</template>

<style>

</style>

5、setup中的context参数 

  • 传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值：
  • export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)

    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}
  • attrs 和 slots 都是有状态的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。此外还需注意，和 props 不同，attrs 和 slots 的属性都不是响应式的。 

源代码： 

<!-- App.vue -->

<script>
  import Hello from './components/Hello.vue';
  export default{
    data() {
        return {
            message: "hello word!"
        };
    },
    methods:{
      injectContext(value){
        console.log(value)
      }
    },
    mounted(){
      console.log(this.$refs.content)
      this.$refs.content.sendeParent()
    },
    components: { Hello }
}

</script>

<template>
  <!-- <Hello id="content" @injectContext="injectContext"></Hello> -->
  <Hello id="content" ref="content" @injectContext="injectContext"></Hello>
  <Hello id="content"></Hello>
  <button @click="message='你好！'">更改</button>
</template>

<style>

</style>

<!-- Hello.vue -->
<script>
  import {onUpdated,toRefs,ref,h} from 'vue'
  export default{
    data(){
      return{
        counter:0
      }
    },
    props:{
      message:{
        type:String,
        default:'你好'
      }
    },
    setup(props,context){
      const counter=ref(20)
      function sendeParent(){
        context.emit('injectContext',counter)
      }
      console.log(context)
      context.expose({
        sendeParent,
        counter
      })
      return()=>h('div',counter.value)
      //props
      // console.log(props.message)
      // const {message}=toRefs(props)
      // console.log(message.value)
      // onUpdated(()=>{
      //   console.log(message.value)
      // })
    },
    // mounted(){
    //   console.log(this.message)
    // }
  }
</script>

<template>
  <h1>我是子组件内容</h1>
  <h2>{{message}}</h2>
  <button @click="sendeParent">发送数据</button>
</template>

<style>

</style>

6、setup中provide和inject 

  • provide()：提供一个值，可以被后代组件注入。

  • function provide<T>(key: InjectionKey<T> | string, value: T): void

  • provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。

  • 当使用 TypeScript 时，key 可以是一个被类型断言为 InjectionKey 的 symbol。InjectionKey 是一个 Vue 提供的工具类型，继承自 Symbol，可以用来同步 provide() 和 inject() 之间值的类型。

  • inject()：注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。

  • 第一个参数是注入的 key。Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。

  • 第二个参数是可选的，即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。如果默认值本身就是一个函数，那么你必须将 false 作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。

  • 与注册生命周期钩子的 API 类似，inject() 必须在组件的 setup() 阶段同步调用。

  • 当使用 TypeScript 时，key 可以是一个类型为 InjectionKey 的 symbol。InjectionKey 是一个 Vue 提供的工具类型，继承自 Symbol，可以用来同步 provide() 和 inject() 之间值的类型。

源代码： 

<!-- App.vue -->
<script>
  import Hello from './components/Hello.vue';
  import {provide} from 'vue'
import { ref } from '@vue/reactivity';
  export default{
    data() {
        return {
            
        };
    },
    setup(){
      const name=ref('xueysr')
      provide('name',name)
      function changeName(){
        name.value='x-ysr'
      }
      return{
        changeName
      }
    },
    components: { Hello }
}

</script>

<template>
  <Hello></Hello>
  <button @click="changeName">改变name</button>
</template>

<style>

</style>

<!-- Hello.vue -->
<script>
  import {inject} from 'vue'
  export default{
    data(){
      return{
        counter:0
      }
    },
    setup(){
      const name=inject('name')
      return{
        name
      }
    }
  }
</script>

<template>
  <h1>我是hello组件</h1>
  <h2>{{name}}</h2>
</template>

<style>

</style>

部分内容转载自：组合式 API：setup() | Vue.js 

X-ysr
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
VueJs中setup的使用(上)
itclanCoder
12-26 1394
前言在写组合式API代码时,首先接触到的是setup这个函数,在一些项目代码里,你会看到有的直接在script标签上添加setup标识,有的在选项式API方式里,以setup()函数,配置选项的方式出现在单文件组件里什么时候用setup()函数方式,什么时候不用,对于有些新手同学,有些困惑,以及它的一个使用特点和规则,都是需要知道的在学习setup之前,先写一个常见的数字加减的示例,介绍两个概念声...
VueJs中setup的使用(下)
itclanCoder
12-27 1745
前言在Vue当中,父组件想要向子组件传值,是通过在父组件标签上通过自定义属性实现的,而在子组件中是通过props进行接收在Vue2.0里面,在子组件中的选项式API配置项选项中props进行接收就可以了的,在子组件中的模板中可以直接使用但在Vue3里面与Vue2.0存在一些差异,这个主要是针对组合式API的setup函数01setup函数接收第一个参数propssetup函数的第一个参数是接收父组...
vue.js基础学习（组合式 API：setup() ）
qq_58866450的博客
08-24 936
基础入门：vue.js 组合式API：setup()
VUE中setup（）
最新发布
hexadecimal_001的博客
07-18 708
在Vue中，setup()函数是Vue 3.0及更高版本引入的一个重要特性，它是Composition API的入口点。setup()函数用于初始化组件的状态和逻辑，包括定义响应式数据、方法和生命周期钩子。以下是关于setup()
运行setup.js文件
weixin_30507269的博客
01-05 246
C:\Windows\System32>wscript.exe setup.js 转载于:https://www.cnblogs.com/gpfeisoft/p/5103338.html
前端必学Vue3 组合式 API 的基础 —— setup
python2021_7的博客
03-16 1446
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Vue3 组合式 API 的基础 —— setup一、setup 是什么二、组合api特点三、setup（）四、ref值类型 响应对象五、reactive引用类型 响应式六、watch监听七、watchEffect监听效果八、computed计算九、生命周期十、全局配置十一、getCurrentInstance获取当前实例十二、setup使用vuex十三、setup(props,context)参数 一、setup 是什么 示例：pand.
Vue3复习和总结----组合式API-setup，终
zyugat的博客
11-17 1008
Vue3复习和总结----组合式API-setup 代码全部放在->github仓库：https://github.com/zyugat/vue-review-all 详细文档可查看：zyugat.cn 前言：分为base、Component、router、Vuex、组合式API。5个部分。 base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli 组合式API-setup 将界面中重复的部分连同功能都提取为可重用的代码段 在 setup 中你应该避免使用 t
vue3-masterclass:Vue学校-The Vue.js 3 Masterclass
03-27
3. **Composition API深度探索**：详细讲解如何使用setup函数，组合API如何帮助组织代码，以及如何使用toRefs、watchEffect和watch等辅助函数。 4. **状态管理**：介绍Vuex 4在Vue 3中的工作原理，以及如何使用...
最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记
qq_33365152的博客
02-18 1108
最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
Vue.js 3.0 是一款流行的前端JavaScript框架，用于构建用户界面。它的API在3.0版本中进行了重大更新和优化，提供了更好的性能和更简洁的语法。这份“Vue.js 3.0 API 官方手册 中文pdf版”是学习Vue 3的重要资源，它...
setup.js:前端项目配置器
04-03
Setup.js 用于配置项目的命令行工具。 概述 Setup.js使用帮助文件： defaults.json —默认配置文件 Presets.json —具有针对不同环境的预设的文件 env-map.json —将环境变量映射到配置中 Setup.js通过set ， unset ， preset ， reset ， env ， extend命令从帮助文件生成具有当前配置的config.json文件。 config.json在项目的CVS中可能会被忽略。 每个开发人员都可以使用自己的配置，手动或通过cli工具更改config.json 。 安装 npm install setupjs 或全球 npm install -g setupjs 为您的项目初始化工具： $( npm bin ) /setupjs init 对于全球： setupjs init 如果参数-c, -e
Vue.js3.0核心源码解析
11-12
总的来说，Vue.js 3.0的核心源码解析涵盖了Vue3.0的全新设计理念，包括Composition API、TypeScript的使用、Proxy驱动的响应式系统、模板语法的增强以及性能优化等多个方面。通过深入学习这些内容，开发者能够更好地...
拥抱组合式API：vue3的script setup解析看这篇就够
12-11 777
vue3除了Composition API是一个亮点之外，尤大大又给我们带来了一个全新的玩意 —— script setup，对于setup大家相信都不陌生，而对于script setup有些同学则表示难以理解，那么从现在开始，这一篇文章将让你一看就懂。 ref与reactive 在setup中，我们拥有ref和reactive俩个api去创建一个响应式变量，这俩者存在的区别是ref是针对基本类型的响应，而reactive是针对引用类型的响应。 import { ref, reactive } fr
你不知道的setup
大转转FE
04-12 377
我们在 Vue2编写组件的时候，会在 props、data、methods、computed 等 options 中定义一些变量。在组件初始化阶段，Vue内部会处理这些 options，即把定义的变量添加到了组件实例上。等模板编译成 render 函数的时候，内部通过 with(this){} 的语法去访问在组件实例中的变量。那么到了 Vue3，新出现的setup启动函数...
前端开发工具与Vue-CLI,vue安装并启动vue项目
QQ群166477105Python技术群
02-17 721
前端开发工具与Vue-CLI 像后端开发一样去开发前端应用，将大的功能拆分成模块化的组件分别开发，最后再组合起来完成整体功能。 Node.js Node.js介绍 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 JavaScript本来只能跑在浏览器上，然后Node.js就是一种能让js直接运行在操作系统的工具。并且它就能够让JS代码在操作系统上实现一些类...
setup
生有涯学无涯
12-18 531
Required Imports and Basic SetupI strongly encourage you to read this entire page. There are a few things you need to know about integrating jsPlumb with your UI. Browser Compatibility Setup Required
【Vue.js 3.0】Day-03 常用 Composition API 拉开序幕的 setup()
day day up
12-14 291
Vue3.0中一个新的配置项，值为一个函数。setup是所有Composition API (组合API) "表演的舞台"。组件中所用到的:数据、方法等等，均要配置在setup中。setup 函数的两种返回值:若返回一个对象，则对象中的属性、方法在模板中均可以直接使用。(重点关注!若返回一个渲染函数: 则可以自定义渲染内容。(了解)setup 函数注意点?Vue2.0 配置(data、methods、computed...) 中可以访问到 setup 中的属性、方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X-ysr

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值