Vue3:计算属性、监听器

这篇具有很好参考价值的文章主要介绍了Vue3:计算属性、监听器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

computed 计算属性

计算属性是指 基于现有状态派生 (演变) 出新的状态,现有状态发生变化,派生状态重新计算。
computed 接收回调函数作为参数,基于回调函数中使用的响应式数据进行计算属性的创建,回调函数的返回值就是基于现有状态演变出的新状态。

// 定义一个数据
const num = ref(0);
// result 通过计算num动态获得
const result = computed(() => num.value * 2);
  • 完整写法
import { ref, computed } from 'vue';

export default {
    setup() {
        // 响应式数据
        const firstName = ref('张');
        const lastName = ref('三');
        
		// 计算属性(完整写法,考虑读和写)
        const fullName = computed({
            get() {
                return firstName.value + lastName.value;
            },
            set (value) {
                const nameArr = value.split('-');
                firstName.value = nameArr[0];
                lastName.value = nameArr[1];
            },
        });
        
       	// 返回所有的数据和方法,才能使用
        return { firstName, lastName, fullName }
    }
}

案例:动态显示名字。

<template>
	<input type="text" v-model="firstName" />
	<input type="text" v-model="lastName" />
	<div>姓名:{{ name }}</div>
</template>

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

export default {
    setup() {
        const firstName = ref('');
        const lastName = ref('');
        // 姓名通过计算属性获得
        const name = computed(() => firstName.value + lastName.value);
        
        return { firstName, laseName, name }
    }
}
</script>

watch 监听状态

watch 方法用于监听响应式数据的变化,数据发生变化时触发。
Vue2 的 watch 是一个配置项,Vue3 的 watch 是一个方法。

# 语法格式
watch([监视对象], fn{监视的回调}, {监视的配置});

监听 ref 的响应式数据

监听 ref 数据时,不能使用 .value,因为监听的是 value 的值,而不是 ref 数据。

  • 监听多个值时,newValue 和 oldValue 会接收一个数组,参数是监听的每一项。

Vue3:计算属性、监听器

使用 watch 方法监听基于 ref 创建的响应式数据 (基本数据类型)。

<template>
	<input type="text" v-model="str">
</template>

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

export default {
    setup() {
        const str ref('');
        
        // 监听表单内容 str
        watch(str, (newValue, oldValue) => {
            console.log(newValue, oldValue);
        }, {
            // 监听的配置
            immediate: true,
            deep: true
        });
        
        // 返回所有的数据和方法,才能使用
        return { str }
    }
}
</script>

使用 watch 监听基于 ref 创建的响应式数据 (引用数据类型)。

import { ref, watch } from "vue";

export default {
    setup() {
        const person = ref({ name: '张三' });
        
        // 监听
        watch(person.value, (newValue, oldValue) => {
            console.log(newValue, oldValue);
        }, {
            // 监听的配置
            immediate: true,
            deep: true
        });
        
        // 返回所有的数据和方法,才能使用
        return { person }
    },
};

使用 watch 监听响应式数据内部的具体属性 (基本数据类型)

import { ref, watch } from "vue";

export default {
    setup() {
        const person = ref({ name: '张三' });
        
        // 监听
        watch(
            () => person.value.name,
            (newValue, oldValue) => {
                console.log(newValue, oldValue);
            }
        );
        
        // 返回所有的数据和方法,才能使用
        return { person }
    },
};

监听 reactive 的响应式数据

import { ref, watch } from "vue";

export default {
    setup() {
        const person = reactive({ name: '张三' });
        
        // 监听
        watch(person, (newValue, oldValue) => {
            console.log(newValue, oldValue);
        });
        
        // 返回所有的数据和方法,才能使用
        return { person }
    },
};

监听 reactive 时存在的问题

坑:监听 reactive 时,oldValue 无法正确获取,都是最新值。(Vue3的遗留问题)

  • 解决方案:

watch 的 参数1 使用 () => 对象名.属性名 监听单个属性,但是要使用 deep 深度监听。(虽然麻烦,但是有效)

  const person = ref({ name: '张三', age: 18 });
  
  watch(
      // 参数一写法解决 oldValue 值无法获取
      [() => person.name, () => person.age],
      (newValue, oldValue) => {
          console.log(newValue, oldValue);
      }
  );

坑:使用 reactive 时,强制开启 deep 深度监视,且 deep 无法被关闭。(Vue3的遗留问题)

Vue3:计算属性、监听器

import { ref, watch } from "vue";

export default {
    setup() {
        const person = reactive({ name: '张三' });
        
        // 监听
        watch(person, (newValue, oldValue) => {
            console.log(newValue, oldValue);
        }, {
            deep: false,   // 无效,无法关闭
        });
        
        // 返回所有的数据和方法,才能使用
        return { person }
    },
};

watchEffect 监听状态

watchEffect 函数在页面加载完成后和数据更新时调用。
watch 和 watchEffect 的区别:

  • watch:既要指明监视的属性,也要指明监视的回调。
  • watchEffect:不用指明监视哪个属性,监视的回调中用到哪个属性,就监听哪个属性。

watchEffect 和 computed 的区别:

  • computed 注重计算出来的值(回调函数的返回值),所以必须要写返回值。
  • watchEffect 更注重的是过程(回调函数的函数),所以不用写返回值。
# 语法格式
watchEffect(() => {
    console.log('watchEffect 函数执行了');
})
<template>
    <h1>{{ person.name }}</h1>
    <button @click="updatePerson">点击更新名字</button>
</template>

<script>
import { reactive, watchEffect } from "vue";
export default {
    setup() {
        // 响应式数据
        let person = reactive({
            name: "张三",
            age: 18,
            job: {
                j1: {
                    salary: 20,
                },
            },
        });

        // 监视
        watchEffect(() => {
            console.log("watchEffect执行了");
            console.log(person.name);
        });

        // 更新名字
        const updatePerson = () => {
            person.name = "李四";
        };
		
        return { person, updatePerson };
    },
};
</script>

toRef 函数

创建一个 ref 对象,其 value 值指向另一个对象中的某个属性。
大白话解释:toRef 方法用于将响应式数据内部的普通数据转化为响应式数据,并且转换后的数据和原始数据存在引用关系,存在引用关系意味着当原始数据发生变化后,toRefs 转换后的数据也会跟着变化。
应用:要将响应式对象中的某个属性单独提供给外部使用时。

// 语法
const name = toRef(对象名, '属性名')
<template>
	<h1>{{ name }}</h1>
	<h1>{{ age }}</h1>
	<h1>{{ salary }}</h1>
</template>

<script>
import { reactive, toRef } from 'vue'
export default {
    name: 'App',
    setup() {
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 20
                }
            }
        })

        return {
            pname: toRef(person, 'name'),
            age: toRef(person, 'age'),
            salary: toRef(person.job.j1, 'salary')
        }
    },
}
</script>

toRefs 函数

toRefs方法接收引用数据类型的响应式数据,它可以将数据中的第一层属性全部转换为响应式数据,返回值是一个对象,对象中存储了所有转换之后的响应式数据。文章来源地址https://www.toymoban.com/news/detail-485805.html

export default {
    setup() {
        const person = reactive({
            name: "张三",
            brand: {
                title: "宝马",
                year: 1
            }
        });
        
        return {
            ...toRefs(person),
            ...toRefs(person.brand)	// 转换第二层数据为响应式
        }
    }
}

到了这里,关于Vue3:计算属性、监听器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3监听器使用

    watch(监听的对象或值, 回调函数(参数新值,旧值), 配置项是对象={   immediate: true//立即监听--进入就会执行一次 deep:true //深度监听 }) 首先引入 设置响应式数据 设置点击事件,点击触发修改num 监听简单数据类型----- immediate: true//立即监听--进入就会执行一次 ---------------

    2024年02月07日
    浏览(40)
  • Vue3 —— watch 监听器及源码学习

    该文章是在学习 小满vue3 课程的随堂记录 示例均采用 script setup ,且包含 typescript 的基础用法 在 vue3 中,必须是 ref 、 reactive 包裹起来的数据,才可以被 watch 监听到 1、语法: watch(source, cb, options) source 是监听的目标,有 4 种书写形式: reactive 形式的响应式数据 ref 形式的响

    2024年02月12日
    浏览(35)
  • Vue3前端开发,watch侦听器的深度监听和精确监听

    Vue3前端开发,watch侦听器的深度监听和精确监听!今天和大家分享的内容是,关于watch的深度侦听和精确监听。 首先看一下,第一个案例,练习的是,深度监听的效果。默认是浅的侦听,是不会触发回调函数的。 如图,当我们点击按钮,修改num值的时候,触发了回调函数,在

    2024年01月23日
    浏览(42)
  • Vue3 计算属性和侦听器实战(computed、watch)——简易点餐页面

    这篇文章记录一下 Vue3 计算属性和侦听器 (computed、watch) 实战的内容,这篇文章我们在有计算属性和侦听器的基础上,我们来制作一个简易点餐页面,接下来我们一起来从零到一开始制作。 计算属性和侦听器相关文章推荐: 深入与浅谈 Vue 中计算属性和侦听器的区别和使用

    2024年02月09日
    浏览(98)
  • Vue3.0 watch和watchEffect监听器:VCA

    在项目中,有时候检测一个变量的值是否反升了变化。通常使用的watch或者使用低效的循环判断。 在次vue中给我们设置了深度监测数据繁盛变化的方法。 1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; 2.immediate:true,代表watch里面声明了之后会立马执行han

    2024年02月06日
    浏览(59)
  • 【vue2】计算属性(computed)与侦听器(watch)详解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘本文核心: 计算属性与侦听属性的用法 目录( 文末有给大家准备好的Xmind思维导图 ) 一、计算属性computed ①默认get()方法,仅是获取值 ②不仅仅是获取值,还具有修改属性功能

    2024年01月16日
    浏览(51)
  • 前端Vue入门-day02-vue指令、computed计算属性与watch侦听器

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 指令补充 指令修饰符 v-bind 对于样式控制的增强  操作class 案例:京东秒杀 tab 导航高亮 操作style  v-model 应用于其他表单元素  computed 计算属性 基础语法 computed 计算属

    2024年02月11日
    浏览(42)
  • 微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化

    ①在项目的根目录中,鼠标右键,创建 components - test 文件夹 ②在新建的 components - test 文件夹上,鼠标右键,点击\\\"新建 Component \\\" ③键入组件的名称之后回车,会自动生成组件对应的4个文件,后缀名分别为 js , json ,. wxml 和. wxss 注意,为了保证目录结构的清晰,建议把不同的

    2024年02月15日
    浏览(69)
  • 【Vue2.x源码系列07】监听器watch原理

    上一章 Vue2计算属性原理,我们介绍了计算属性是如何实现的?计算属性缓存原理?以及洋葱模型是如何应用的? 本章目标 监听器是如何实现的? 监听器选项 - immediate、deep 内部实现 在 Vue初始化实例的过程中,如果用户 options选项中存在侦听器,则初始化侦听器 watch 类型:

    2023年04月20日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包