Vue3-Composition-API（二）

最新推荐文章于 2024-04-02 10:13:11 发布
最新推荐文章于 2024-04-02 10:13:11 发布
阅读量995 收藏 17
点赞数 29
分类专栏： # Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Welitsi/article/details/135958745
版权

一、computed函数使用

1.computed

在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理

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

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

如何使用computed呢？

  • 方式一：接收一个getter函数，并为 getter 函数返回的值，返回一个不变的 ref 对象；
  • 方式二：接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象；
const fullName = computed(() => {
    return firstName.value + " " + lastName.value
})

const fullName = computed({
    get: () => {
        return firstName.value + " " + lastName.value
    },
    set: newValue => {
        const names = newValue.split(" ")
        firstName.value = names[0]
        lastName.value = names[1]
    }
})

2.setup中使用ref

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

  • 其实非常简单，我们只需要定义一个ref对象，绑定到元素或者组件的ref属性上即可；
<template>
  <!-- 1.获取元素 -->
  <h2 ref="titleRef">我是标题</h2>
  <button ref="btnRef">按钮</button>

  <!-- 2.获取组件实例 -->
  <show-info ref="showInfoRef"></show-info>

  <button @click="getElements">获取元素</button>
</template>

<script>
  import { ref, onMounted } from 'vue'
  import ShowInfo from './ShowInfo.vue'

  export default {
    components: {
      ShowInfo
    },
    setup() {
      const titleRef = ref()
      const btnRef = ref()
      const showInfoRef = ref()

      // mounted的生命周期函数
      onMounted(() => {
        console.log(titleRef.value)
        console.log(btnRef.value)
        console.log(showInfoRef.value)

        showInfoRef.value.showInfoFoo()
      })

      function getElements() {
        console.log(titleRef.value)
      }

      return {
        titleRef,
        btnRef,
        showInfoRef,
        getElements
      }
    }
  }
</script>

<style scoped>
</style>

二、组件的生命周期函数

1.生命周期钩子

我们前面说过 setup 可以用来替代 data 、 methods 、 computed 等等这些选项，也可以替代生命周期钩子。

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

  • 可以使用直接导入的 onX 函数注册生命周期钩子；
<template>
  <div>AppContent</div>
</template>

<script>
  import { onMounted, onUpdated, onUnmounted } from 'vue'

  export default {
    beforeCreate() {

    },
    // created() {

    // },
    // beforeMount() {

    // },
    // mounted() {

    // },
    // beforeUpdate() {

    // },
    // updated() {

    // }
    setup() {
      // 在执行setup函数的过程中, 你需要注册别的生命周期函数
      onMounted(() => {
        console.log("onmounted")
      })
    }
  }
</script>

<style scoped>
</style>

在这里插入图片描述

三、Provide/lnject使用

1.Provide函数

事实上我们之前还学习过Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的选项。

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

  • 可以通过 provide 方法来定义每个 Property；

provide可以传入两个参数：

  • name：提供的属性名称；
  • value：提供的属性值；
let counter = 100
let info = {
    name: 'www',
    age: 10
}
provide("counter", counter)
provide("info", info)

2.Inject函数

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

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

inject可以传入两个参数：

  • 要 inject 的 property 的 name；
  • 默认值；
const counter = inject("counter")
const info = inject("info")

3.数据的响应式

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

let counter = ref(100)
let info = reactive({
    name: 'www',
    age: 10
})
provide("counter", counter)
provide("info", info)

四、watch/watchEffect

1.侦听数据的变化

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

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

  • watchEffect：用于自动收集响应式数据的依赖；
  • watch：需要手动指定侦听的数据源；

2.Watch的使用

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

  • watch需要侦听特定的数据源，并且执行其回调函数；
  • 默认情况下它是惰性的，只有当被侦听的源发生变化时才会执行回调；
const name = ref('kobe')
watch(name, (newValue, oldValue) +> {
    console.log(newValue, oldValue)
})

const changeName = () => {
    name.value = "james"
}

3.侦听多个数据源

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

const name = ref('kobe')
const age = ref(10)
watch([name,age], (newValue, oldValue) +> {
    console.log(newValue, oldValue)
})

const changeName = () => {
    name.value = "james"
}

4.watch的选项

如果我们希望侦听一个深层的侦听，那么依然需要设置 deep 为true：

  • 也可以传入 immediate 立即执行；
// 1.定义数据
const message = ref("Hello World")
const info = reactive({
    name: "why",
    age: 18,
    friend: {
        name: "kobe"
    }
})

// 2.侦听数据的变化
watch(message, (newValue, oldValue) => {
    console.log(newValue, oldValue)
})
watch(info, (newValue, oldValue) => {
    console.log(newValue, oldValue)
    console.log(newValue === oldValue)
}, {
    immediate: true
})

// 3.监听reactive数据变化后, 获取普通对象
watch(() => ({ ...info }), (newValue, oldValue) => {
    console.log(newValue, oldValue)
}, {
    immediate: true,
    deep: true
})

5.watchEffect

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

我们来看一个案例：

  • 首先，watchEffect传入的函数会被立即执行一次，并且在执行的过程中会收集依赖；
  • 其次，只有收集的依赖发生变化时，watchEffect传入的函数才会再次执行；
const name = ref("abc")
const age = ref(18)

watchEffect(() => {
    console.log("watchEffect执行~")
})

6.watchEffect的停止侦听

如果在发生某些情况下，我们希望停止侦听，这个时候我们可以获取watchEffect的返回值函数，调用该函数即可。

比如在上面的案例中，我们age达到20的时候就停止侦听：

<template>
  <div>
    <h2>当前计数: {{ counter }}</h2>
    <button @click="counter++">+1</button>
    <button @click="name = 'kobe'">修改name</button>
  </div>
</template>

<script>
  import { watchEffect, watch, ref } from 'vue'

  export default {
    setup() {
      const counter = ref(0)
      const name = ref("why")

      // watch(counter, (newValue, oldValue) => {})

      // 1.watchEffect传入的函数默认会直接被执行
      // 2.在执行的过程中, 会自动的收集依赖(依赖哪些响应式的数据)
      const stopWatch = watchEffect(() => {
        console.log("-------", counter.value, name.value)

        // 判断counter.value > 10
        if (counter.value >= 10) {
          stopWatch()
        }
      })

      return {
        counter,
        name
      }
    }
  }
</script>

<style scoped>
</style>

五、自定义Hook练习

1.useCounter

我们先来对之前的counter逻辑进行抽取：

import { ref, onMounted } from 'vue'

export default function useCounter() {
  const counter = ref(0)
  function increment() {
    counter.value++
  }
  function decrement() {
    counter.value--
  }
  onMounted(() => {
    setTimeout(() => {
      counter.value = 989
    }, 1000);
  })

  return {
    counter,
    increment,
    decrement
  }
}

2.useTitle

我们编写一个修改title的Hook：

import { ref, watch } from "vue";

export default function useTitle(titleValue) {
  // document.title = title

  // 定义ref的引入数据
  const title = ref(titleValue)

  // 监听title的改变
  watch(title, (newValue) => {
    document.title = newValue
  }, {
    immediate: true
  })

  // 返回ref值
  return {
    title
  }
}

3.useScrollPosition

我们来完成一个监听界面滚动位置的Hook：

import { reactive } from 'vue'

export default function useScrollPosition() {
  // 1.使用reative记录位置
  const scrollPosition = reactive({
    x: 0,
    y: 0
  })

  // 2.监听滚动
  document.addEventListener("scroll", () => {
    scrollPosition.x = window.scrollX
    scrollPosition.y = window.scrollY
  })


  return {
    scrollPosition
  }
}

4.Hook练习

App.vue

<template>
  <div>AppContent</div>
  <button @click="changeTitle">修改title</button>

  <!-- 1.计数器 -->
  <!-- <hr>
  <home></home>
  <hr>
  <about></about> -->

  <!-- 2.home和about页面的切换 -->
  <button @click="currentPage = 'home'">home</button>
  <button @click="currentPage = 'about'">about</button>

  <component :is="currentPage"></component>

  <div class="content"></div>

  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
</template>

<script>
  import { ref } from 'vue'
  import Home from './views/Home.vue'
  import About from './views/About.vue'

  import useTitle from './hooks/useTitle'

  export default {
    components: {
      Home,
      About
    },
    setup() {
      const currentPage = ref("home")

      function changeTitle() {
        useTitle("app title")
      }

      return {
        changeTitle,
        currentPage
      }
    }
  }
</script>

<style scoped>
  .content {
    width: 3000px;
    height: 100px;
    background-color: orange;
  }
</style>

views/About.vue

<template>
  <h2>About计数: {{ counter }}</h2>
  <button @click="increment">+1</button>
  <button @clcik="decrement">-1</button>
</template>

<script>
  import { onActivated } from 'vue'
  import useCounter from '../hooks/useCounter'
  import useTitle from '../hooks/useTitle'

  export default {
    setup() {

      // 切换标题
      useTitle("关于")

      return {
        ...useCounter()
      }
    }
  }
</script>

<style scoped>
</style>

views/Home.vue

<template>
  <h2>Home计数: {{ counter }}</h2>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>

  <button @click="popularClick">首页-流行</button>
  <button @click="hotClick">首页-热门</button>
  <button @click="songClick">首页-歌单</button>

  <div class="scroll">
    <h2>x: {{ scrollPosition.x }}</h2>
    <h2>y: {{ scrollPosition.y }}</h2>
  </div>
</template>

<script>
  import { onMounted, ref } from 'vue'
  import useCounter from '../hooks/useCounter'
  import useTitle from '../hooks/useTitle'
  import useScrollPosition from '../hooks/useScrollPosition'

  export default {
    setup() {
      // 1.counter逻辑
      const { counter, increment, decrement } = useCounter()

      // 2.修改标题
      const { title } = useTitle("首页")

      // 3.监听按钮的点击
      function popularClick() {
        title.value = "首页-流行"
      }
      function hotClick() {
        title.value = "首页-热门"
      }
      function songClick() {
        title.value = "首页-歌单"
      }

      // 4.获取滚动位置
      const { scrollPosition } = useScrollPosition()
      console.log(scrollPosition)

      return {
        counter,
        increment,
        decrement,
        popularClick,
        hotClick,
        songClick,
        scrollPosition
      }
    }
  }
</script>

<style scoped>
</style>

六、script setup语法糖

1.script setup语法

<script setup>是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖，当同时使用 SFC 与组合式 API 时则推荐该语法。

  • 更少的样板内容，更简洁的代码；
  • 能够使用纯 Typescript 声明 prop 和抛出事件；
  • 更好的运行时性能 ；
  • 更好的 IDE 类型推断性能 ；

使用这个语法，需要将 setup attribute 添加到 <script> 代码块上：

<script setup>
    console.log(11)
</script>

里面的代码会被编译成组件 setup() 函数的内容：

  • 这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同；
  • <script setup> 中的代码会在每次组件实例被创建的时候执行。

2.顶层的绑定会被暴露给模板

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用：

<script setup>
    const message = ref(111)
</script>
<template>
    message: {{ message }}
</template>

响应式数据需要通过ref、reactive来创建。

3.导入的组件直接使用

<script setup>范围里的值也能被直接作为自定义组件的标签名使用：

<script setup>
    import ShowInfo from './ShowInfo.vue'
</script>
<template>
    <ShowInfo></ShowInfo>
</template>

4.defineProps() 和 defineEmits()

为了在声明 props 和 emits 选项时获得完整的类型推断支持，我们可以使用 defineProps 和 defineEmits API，它们将自动地在 <script setup>可用

<template>
  <div>ShowInfo: {{ name }}-{{ age }}</div>
  <button @click="showInfoBtnClick">showInfoButton</button>
</template>

<script setup>

// 定义props
const props = defineProps({
  name: {
    type: String,
    default: "默认值"
  },
  age: {
    type: Number,
    default: 0
  }
})

// 绑定函数, 并且发出事件
const emits = defineEmits(["infoBtnClick"])
function showInfoBtnClick() {
  emits("infoBtnClick", "showInfo内部发生了点击")
}

// 定义foo的函数
function foo() {
  console.log("foo function")
}
defineExpose({
  foo
})

</script>

<style scoped>
</style>

5.defineExpose()

使用 <script setup> 的组件是默认关闭的：

  • 通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定；

通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的 property：

ShowInfo.vue

function foo() {
    log("foo function")
}

defineExpose({
    foo
})

App.vue

const showInfoRef = ref(null)
function callShowInfoRef() {
    showInfoRef.value.foo()
}
DustinWangq
关注
  • 29
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE3语法--computed计算属性中get和set使用案例
雾林小妖的博客
02-04 1875
vue3中computed计算属性的含义及使用方式
vue3-composition-admin:v基于vue3的管理端模板（Vue3 TS Vuex4 element-plus vue-i18n-next composition-api）vue3-admin vue3-ts-admin
03-20
vue3-composition-admin是一个管理端模板解决方案，它是基于vue3，ts和element-plus，项目都是以composition api风格编写的。 简介 项目的基础版本出自自于源于花裤衩大佬的vue-element-admin。 版本： vue2 + js...
Vue3中computed的使用(get和set)
weixin_61945023的博客
07-11 1万+
computed中get和set的用法
Vue3组件计算属性的get和set方法
最新发布
brucexia的专栏
04-02 527
在浏览器的控制台中设置计算属性namePrice的值为“空调 5900元”，按回车键，可以发现计算属性的内容变成了“空调 5900元”，效果如图3-8所示。计算属性中的每一个属性都对应一个对象，对象中包括get和set方法，分别用来获取计算属性和设置计算属性。提示：通常情况下，get()方法需要使用return返回内容。而set()方法不需要，它用来改变计算属性的内容。默认情况下是不能直接修改计算属性的，如果需要修改计算属性，这时就需要提供一个set方法。
vue3 Computed中get 和set
weixin_49684489的博客
03-12 1万+
vue3 computed中get和set 1.get vue3中计算属性的函数中如果只传入一个回调函数，表示的是get <template> <div class="main"> <div> <input type="text" v-model="userName.oneName" /> <input type="text" v-model="userName.twoName" /> </div&
Vue3/ Vue3 计算属性computed函数 语法 与 介绍 、Vue3 Vue2computed计算属性 能不能传参 怎么传参
m0_64494670的博客
01-07 6067
Vue3/ Vue3 计算属性computed函数 语法 与 介绍 、Vue3 Vue2computed计算属性 能不能传参 怎么传参
vue3前端青铜到黄金王者 - 第10个入门computed使用set和get
丸子酱
08-24 2022
前篇写了computed属性，但是我们发现不能修改computed属性的值。 其实可以修改的我们再看看。 v computed是什么？ 计算属性, 一个变量的值根据其他变量（一个或者多个）的变化，自动反映，算出新的结果。 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。 好，复习前面的。我们这里改造成get 和set方法。 代码如下： <!DOCTYPE html> <html l
vue-composition-test-utils:适用于Vue 2和3的简单vue合成api单元测试实用程序
04-27
简单的Vue Composition API测试实用程序 安装 // use yarn yarn add vue-composition-test-utils -D // use npm npm install vue-composition-test-utils -D 演示版 代码 import { ref } from 'vue' export ...
vue3-composition-admin.zip
06-06
vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。 简介 项目的基础版本出自于源于花裤衩大佬的 vue-element-admin。
vue3-composition-API
03-31
vue3-composition-API
vue3-composition-admin::party_popper: 基于vue3 的管理端模板(Vue3 TS Vuex4 element-plus vue-i18n-next composition-api) vue3-admin vue3-ts-admin
05-10
vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。 简介 项目的基础版本出自于源于花裤衩大佬的 vue-element-admin。 版本： vue2+js版本： ...
vue中computed之set和get
放弃不难，但坚持一定很酷！
04-27 2539
b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存 计算的结果，不会多次执行。计算属性中包含了set(获取计算属性)和get(设置计算属性)两个方法(回调函数)get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值。a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化。set回调函数: 监视当前属性值发生改变时调用,更新相关的属性值。a.数据可以进行逻辑处理操作。b.对计算属性中的数据进行监视。
03.vue3的计算属性
垂耳兔的博客
04-11 7550
vue3的计算属性相关介绍
vue3 computed 里面set get方法使用
wandoumm的博客
07-09 1386
{{count}} {{newCount}} add import {reactive,ref,watch,onBeforeMount,computed} from 'vue' const count = ref(0)
vue3中computed的使用详解
listener_life的博客
03-15 3067
vue3中computed的使用详解
Vue3——计算属性computed
mantou_riji的博客
07-25 2787
可以监视一个数据也可以同时监视多个数据。import{//监视一个数据watch(监视属性,(newValue,oldValue)=>{监视的回调}，{监视的配置})//监视多个数据watch([监视属性1，监视属性2],(newValue,oldValue)=>{监视的回调}，{监视的配置})}eg效果代码demo.vue......
vue 中 computed属性中的get与set；
YZ_ZZZ24的博客
05-17 8113
1.computed是对⾃⼰定义的变量进⾏监控，这⾥的变量不是在data中定义，直接 在computed中定义，然后变量放到展⽰页⾯后就实现了数据的双向绑定，当变量发 ⽣改变是就会触发计算，说到这就要说说第⼆点get和set ⽅法了， 2.computed中有get和set⽅法，（在默认的情况下只有get） 1.get⽅法是取，相当于我们可以在get中给这个计算属性中的变量赋值 2.set⽅法是改变时触发，这⾥的改变指的是当我们在computed中定义的变量的值发⽣改变是，会触发set⽅法，这样我们就
Vue 中Computed中的get和set方法
热门推荐
Sporg的博客
01-22 1万+
vue中计算属性的get和set函数
vue2.0安装npm install element-plus --save，运行提示npm install --save @vue/composition-api @vue/composition-api/dist/vue-composition-api.mjs @vue/reactivity @vue/shared如何处理
07-08
运行提示`npm install --save @vue/composition-api @vue/composition-api/dist/vue-composition-api.mjs @vue/reactivity @vue/shared`是因为你在安装Element Plus时，它依赖于Vue 3.0的Composition API和其他相关的包。 解决这个问题，你需要按照提示安装所需的依赖包。可以运行以下命令来安装这些依赖： ``` npm install --save @vue/composition-api @vue/composition-api/dist/vue-composition-api.mjs @vue/reactivity @vue/shared ``` 这将安装所需的依赖包并将其添加到你的项目中。安装完成后，你应该能够正常运行Element Plus和其他依赖项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值