Vue3菜鸟入门教程:计算属性和监听器的用法

2023-09-0209:30:10WEB前端开发Comments1,946 views字数 3898阅读模式

computed计算属性

计算属性指的是将Vue3的响应式数据,经过某种算法计算以后返回的一个值,这个值可以直接用于模板渲染。比如,我们经常在网页中渲染金额,如果金额过大的化,会导致内容很长。比如10000000表示1000万,我们可以将这个金额转换为1000w来进行表示。在使用计算属性的过程中,需要注意,尽量不要在异步方法中使用计算属性,尽量不要修改计算属性的值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

示例:计算金额。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

<script setup>
import {computed, ref} from "vue";

// 定义金额
const money = ref(1000000)

// 计算属性,将10000000计算为1000w
const moneyW = computed(() => {
  return `${money.value / 10000}w`
})

</script>

<template>
  <div>
    <div>原始金额:{{ money }}</div>
    <div>转换金额:{{ moneyW }}</div>
  </div>
</template>

<style scoped></style>

watch监听器

watch监听器的作用是监听一个或者多个数据的变化,数据变化时执行回调函数。watch方法有两个额外参数,immediate表示立即执行,deep表示深度监听。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

示例:监听单个值的变化。在这个案例中,我们定义了两个响应式变量msg和count,count可以通过两个按钮的点击分别增加和减少,msg的值会根据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

<script setup>
import {ref, watch} from "vue";

const msg = ref("请点击按钮进行操作")
const count = ref(0)

const onAdd = () => {
  count.value++
}
const onSub = () => {
  count.value--
}

// 监听器,监听count的值
watch(count, (newValue, oldValue) => {
  msg.value = `您点击了按钮,count的值从${oldValue}变成了${newValue}`
})

</script>

<template>
  <div>
    <div>{{ msg }}</div>
    <div>{{ count }}</div>
    <div>
      <button @click="onAdd">+</button>
      <button @click="onSub">-</button>
    </div>
  </div>
</template>

<style scoped></style>

示例:监听多个响应式对象的变化。在这个案例中,我们给出了x和y两个坐标变量,然后使用监听器监听这两个值的变化。只要其中有一个值发生变化,监听器的回调方法就会执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

<script setup>
import {ref, watch} from "vue";

// 坐标
const x = ref(0)
const y = ref(0)
const msg = ref(`旧坐标:0,0  新坐标:0,0`)

// 监听器,监听count的值
watch([x, y], ([x, y], [ox, oy]) => {
  msg.value = `旧坐标:${ox},${oy}  新坐标:${x},${y}`
})

</script>

<template>
  <div>
    <div>{{ msg }}</div>
    <div>
      <div>请输入x坐标:<input type="number" v-model="x"></div>
      <div>请输入y坐标:<input type="number" v-model="y"></div>
    </div>
  </div>
</template>

<style scoped></style>

示例:immediate的用法。在这个案例中,我们演示了参数immediate的用法,这个参数用于立即执行监听,特别适合那种搜索的场景。当用户什么都没有输入的时候,我们立即执行一次监听,搜索所有数据。当用户输入内容以后,则再次根据监听到的新值,取搜索符合条件的数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

<script setup>
import {ref, watch} from "vue";

// 搜索关键字
const search = ref("")
// 搜索结果
const searchResult = ref([])
// 模拟数据
const data = ["a", "b", "c"]

// 监听搜索关键字的变化
watch(search, (newValue, oldValue) => {
  if (newValue === "") {
    // 为空则全部数据
    searchResult.value = data
  } else {
    // 否则取相等的数据
    searchResult.value = data.filter((v, i, arr) => {
      return arr[i] === newValue
    })
  }
}, {immediate: true})

</script>

<template>
  <div>
    <div>
      <input type="text" v-model="search" placeholder="请输入...">
      <select>
        <option value="" v-for="(v,i) in searchResult" :key="i">{{ v }}</option>
      </select>
    </div>
  </div>
</template>

<style scoped></style>

示例:deep参数的用法。在这个案例中,我们定义了一个员工对象,有id和name以及age三个属性,我们使用监听器deep深度监听器其属性的变化,任何一个属性变化,都会触发监听的回调。对于对象类型的数据,如果不加deep参数,会无法监听,也就是监听器不会生效。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

<script setup>
import {reactive, ref, watch} from "vue";文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

const employee = reactive({
id: 1,
name: "张三",
age: 22,
})
const msg=ref(`员工【${employee.id},${employee.name},${employee.age}】`)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

// 监听搜索关键字的变化
watch(employee, (newValue, oldValue) => {
msg.value=`员工【${newValue.id},${newValue.name},${newValue.age}】`
}, {deep: true})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

</script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

<template>
<div>
<div>
<h1>{{msg}}</h1>
<form action="#">
<div>编号:<input type="text" v-model="employee.id"></div>
<div>姓名:<input type="text" v-model="employee.name"></div>
<div>年龄:<input type="text" v-model="employee.age"></div>
</form>
</div>
</div>
</template>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

<style scoped></style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

示例:监听对象的某个具体属性。开启deep会耗费很大的性能,在实际开发中,尽量少应用。如果需要监听对象的属性,可以参考如下案例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html

<script setup>
import {reactive, ref, watch} from "vue";

const employee = reactive({
  id: 1,
  name: "张三",
  age: 22,
})
const msg = ref(`员工【${employee.id},${employee.name},${employee.age}】`)

// 监听搜索关键字的变化
watch(()=>employee.age, (newValue, oldValue) => {
  msg.value = `员工【${employee.id},${employee.name},${newValue}】`
})

</script>

<template>
  <div>
    <div>
      <h1>{{ msg }}</h1>
      <form action="#">
        <div>编号:<input type="text" v-model="employee.id"></div>
        <div>姓名:<input type="text" v-model="employee.name"></div>
        <div>年龄:<input type="text" v-model="employee.age"></div>
      </form>
    </div>
  </div>
</template>

<style scoped></style>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55598.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/55598.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定