Vue Computed中get 和set的 以及Computed与watch（关于props接收值报错问题）

最新推荐文章于 2024-07-11 19:07:49 发布
最新推荐文章于 2024-07-11 19:07:49 发布
阅读量684 收藏 8
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangquanming123/article/details/135558482
版权
文章讲述了当子组件通过props接收父组件参数时，由于props值不可直接修改导致created生命周期钩子中报错的问题。提供了两种解决方案：一是利用Computed的get和set，二是结合Computed与watch进行变量赋值操作。
摘要由CSDN通过智能技术生成

**

当我们的子组件通过props接收到父组件参数时候 created打印报错或者undefind时

**
在这里插入图片描述

  • 一、原因：

原因是什么呢？ 就是子组件中props的值是不允许直接被改变的，如果直接改变就会报错了

  • 二、解决办法

解决办法可以通过
1、Computed中get 和set的
2、Computed与watch

方法一：通过Computed中get 和set的

在get中给这个变量重新赋值来实现值的改变并使用
在这里插入图片描述

在这里插入图片描述

方法二、Computed与watch

同样是通过重新进行变量赋值的方法来对props中的值进行使用和改变
在这里插入图片描述
在这里插入图片描述

花小音
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE3语法--computed计算属性中get和set使用案例
雾林小妖的博客
02-04 3314
vue3中computed计算属性的含义及使用方式
Vue的知识梳理总结及面试可能
毅哥哥的博客
11-10 377
Vue的数据驱动原理？数据更新原理？响应式原理？ 数据通过object.defineProperty进行getset拦截。 通知watcher（观察者模式）订阅发布模式，触发组件重新渲染，创建新的虚拟DOM，对比旧的虚拟DOM，通过diff找出不同，以最小代价更新节点。 什么是Vue？ 核心代表人物 尤雨溪 Vue是饿了么ued团队开发并维护的一个渐进式框架，核心关注视图层 vue的核心是一个允许采用简洁的模板声明式的将数据渲染进DOM系统 m与v没有任何联系，VM=>双向数据绑定 为什么vu
解决vue3子组件onMounted中获取不到props的值
最新发布
蒾酒的博客
07-11 611
很多情况下父组件传值给子组件通过props的方式，而子组件的onMounted生命周期内又需要用到props的值来进行初始化操作。但是在onMounted内是无法获取到props的值。
vue子组件赋值props_【Vue原理】Props - 源码版
weixin_39610594的博客
11-25 1217
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本2.5.17今天记录 Props 源码流程，哎，这东西，就算是研究过了，也真是会随着时间慢慢忘记的。幸好我做了详细的文章，忘记了什么的，回忆起来必然是很快的。好的，回到正题，Props请你在读这篇之前，先去看看我的白话版【Vue原理】Props - 白话版在上面这篇...
Vue之computed(计算属性)详解get()、set()
热门推荐
Hanhanyoona的博客
08-09 5万+
Vue的计算属性： 1.在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。 2.通过getter\setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。 <div id="demo"> 姓：<input type="text" placeholder="firstName" v-mode...
vue 中 computed属性中的get与set；
YZ_ZZZ24的博客
05-17 8256
1.computed是对⾃⼰定义的变量进⾏监控，这⾥的变量不是在data中定义，直接 在computed中定义，然后变量放到展⽰页⾯后就实现了数据的双向绑定，当变量发 ⽣改变是就会触发计算，说到这就要说说第⼆点get和set ⽅法了， 2.computed中有get和set⽅法，（在默认的情况下只有get） 1.get⽅法是取，相当于我们可以在get中给这个计算属性中的变量赋值 2.set⽅法是改变时触发，这⾥的改变指的是当我们在computed中定义的变量的值发⽣改变是，会触发set⽅法，这样我们就
Vue使用计算属性computed和方法区别
fbuchifanle的博客
03-21 156
Vue.js4-1.3计算属性缓存。使用计算属性时，每次获取的值是基于依赖的缓存值。当页面重新渲染时，如果依赖的数据未发生改变，使用计算属性获取的值就一直是缓存值。
vue中watch和computed为什么能监听到数据的改变以及不同之处
10-15
在Vue.js框架中，watch和computed是用来监听数据变化的两种不同的属性。它们可以侦测到数据的变化，并且做出相应的响应。在介绍它们为什么能监听到数据变化之前，我们先了解一下Vue的核心特性之一——数据响应式原理...
Vue中computed及watch区别实例解析
10-15
在Vue.js框架中，`computed`和`watch`都是用于处理数据变化的机制，但它们在功能和使用场景上存在显著的区别。以下是关于这两个概念的详细解析。 **计算属性（Computed）** 计算属性`computed`主要用于创建基于现有...
解决vue 子组件修改父组件传来的props值报错问题
10-16
以上就是在Vue中解决子组件修改父组件props值报错问题的方法。通过使用计算属性、数据或事件，我们可以保持数据流动的单向性，确保组件间的通信清晰且易于维护。记住，良好的组件设计应当遵循Vue的最佳实践，这样...
Vue computed计算属性 vs 方法（曾经面试时问过两者之间的区别，就自己总结记录下）
weixin_37795155的博客
11-03 172
Vue computed计算属性 vs 方法
vue组件属性（props）及私有数据data
左直拳的马桶_日用桶
07-07 1871
vue组件中，props是公有属性，主要对外，相当于类里面的get、set方法操作的属性；data是私有数据，主要供组件内部访问。 vue作为一种前端开发框架，组件是其中的主角吧。其实任何一种前端框架，除了vue，还有react，组件都应该是主角。为啥呢，因为组件最能体现面向对象思想，单一职责，良好的封装性，高内聚，低耦合，利于复用和维护，提升开发效率，符合人类思维模式。。。好处多多。所谓的前端，就是跑在浏览器一侧的代码。以前的前端代码，写的时候是什么样，最终运行的时候就是什么样，完全由浏览器解释运行，所以
vue数据绑定中defineProperty清晰解析和set和get使用,不懂就问
有问题 ! 请留言 !
03-18 2139
defineProperty清晰解析和set和get使用,不懂就问 都知道vue中的数据绑定就是用object.defineProperty以及其中的set和get实现的,所以理解vue的内部原理之前就需要理解object.defineProperty.因为很多关于这个的解释博客都写得很难理解,所以自己写一下自己的理解. 概念 Object.defineProperty(obj, prop, ...
解决当子组件在computed中使用父组件传递过来的props值时，第一次有值，第二次报undefined的问题
廖子默
03-03 7664
大概说一下我的业务流程 1.父组件发送了一个对象数据给子组件（鼠标每移动一次就发送一次，即数据是动态不断传送的） 2.这个数据的格式是这样的。 3.然后我们去子组件那里得到这个props值 现在问题就来了 1.我想在computed中使用这个值，然后我就以如下方式使用它（注释部分就是解决问题所在） 2.然后有趣的问题就来了，当我刷新页面的时候，控制台竟然报undefined 后面百度了一...
vue2计算属性内的get/set解析
weixin_41993525的博客
04-13 1388
在计算属性内，get/set字面意思是获取和设置操作，计算属性值根据依赖变量的值在get内return，set则是值改变时需要执行的区域。常规的computed写法，如果b变量在某个地方被更改的话，会报错。
VUE - computed 计算属性 ( get set )
小焊猪 - web前端
07-03 833
computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。这样可以不污染数据源。<!doctype html> <html> <head> <meta charset="utf-8"> <title>vue</title> <script src=&am
Vue Computed中get 和set讲解
zhumizhumi的博客
05-23 5万+
没有点击点击事件之前，页面的输出：可以看到，在没有进行任何操作之前getter就会自动执行，页面中的fullName已经改变。只有当computed监测的值变化的时候，也就是我下面例子中的fullName变化的时候，set才回被调用。点击过点击事件之后，调用乐set，便可以进行操作了。上面的点击事件，改变fullName的值。
props的几种写法——defineProps定义props、toRefs接收props、computed中get和set写法、watch深度监听immediate-true
weixin_44867717的博客
05-15 941
script>//写法一Reply},data() {return{replys:''},methods: {//写法二props: {id: {},},width: {},data() {return{replys:''},methods: {</script>
vue中computed之set和get
放弃不难，但坚持一定很酷！
04-27 4302
b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存 计算的结果，不会多次执行。计算属性中包含了set(获取计算属性)和get(设置计算属性)两个方法(回调函数)get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值。a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化。set回调函数: 监视当前属性值发生改变时调用,更新相关的属性值。a.数据可以进行逻辑处理操作。b.对计算属性中的数据进行监视。
vue computed 已声明props 传过来的值,watch 无法监听到
09-06
在Vue中，computed属性是根据其他属性计算得出的属性，而watch属性是用来监听属性值的变化并触发相应的处理函数。根据这两个属性的特性，watch是无法直接监听props传过来的值的。 原因是因为props是通过父组件传递...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值