【折腾】非响应式数据也并非一样要定义在data的retuen{}外

最新推荐文章于 2023-09-08 18:15:49 发布
最新推荐文章于 2023-09-08 18:15:49 发布
阅读量348 收藏
点赞数
分类专栏： 复习小技巧 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Madman528/article/details/123741917
版权

但是为什么他妈的都是挂在到组件上面而页面不显示

 

 

得出结论：在执行mounted（）DOM渲染完成才定义的this.xx=xx就无法渲染，因为不是响应式的

可以在create（），

 beforeMount()

mounted()不行！！因为渲染完dom才有this.xxx=xxx

 

 

 

高山我梦口香糖
关注
专栏目录
【vue3】2 入门写法 retuen 导入数据toRefs（）
jieweiwujie的博客
10-06 166
入门写法 retuen 导入数据toRefs（）
Vue3快速上手
最新发布
郭宝的博客
09-09 604
不需要，watch会自动读取。
深入了解vue2没有在data中定义的属性非响应式的问题
yjy_191的博客
09-08 988
vue2 响应式数据 是通过 es5 中的 Object.defineProperty 方法来实现，把 data 定义的所有属性，转换为 get/set 方法，使用 Object.defineProperty 方法劫持
避免Vue中data数据的响应式
qq_45279180的博客
03-21 3273
对于Vue的响应式大家应该都有所了解，通过getter和setter来实现数据的订阅和分发。我们在实际使用中可能会遇到这样一个场景，就是Vue组件的data部分的数据会非常多，可能数据来到了数千上万条甚至是十来万，这时页面会变得非常卡顿。关于Vue的性能优化中有这样一条：复杂(数据庞大或结构复杂)的对象数据不要放在Data中，这是因为Vue对深度遍历data独享的属性并依次添加getter和setter，以此达到响应式的目的。既然知道原因就好做了，我们可以根据这个问题给出三种解决方案： 将数据不在dat
vue 非响应式属性放哪_vue响应式原理及项目中常见的坑
weixin_34722747的博客
02-05 1191
vue 的响应式原理是核心是通过 es5 的保护对象的 object.defindeproperty 中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 wacher，观察者 wacher自动触发重新render 当前组件(...
【折腾】非响应式数据为何不能用let而是this
Madman528的博客
03-25 425
非响应式数据定义在return{}外， ，照理data()也是个函数，为何用let定义外面无法访问，要用this.属性=““ 才可以，是因为作用域问题吗 得出结论：在datareturn外定义的用let var name声明的数据不过是普通变量，无法被外界访问，当然不信是个函数可以打印一下 data渲染后再到mounted ...
【大前端03-01】手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法
时光海的博客
11-24 310
【作业】手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法【简答题】一、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。【简答题】二、请简述 Diff 算法的执行过程【编程题】一、模拟 VueRouter 的 hash 模式的实现，实现思路和 History 模式类似，把 URL 中的 # 后面的内容作为路由的地址，可以通过 hashchange 事件监听路由地址的变化。【编程题】二、在模拟 Vue
unity协程yield retuen
09-07
Unity协程中的yield return语句用于在协程执行过程中暂停执行，并等待特定的条件满足后再继续执行。这些条件可以是等待一段时间、等待某个异步操作完成、等待帧结束等。以下是一些常用的yield return语句： - yield ...
数据结构第四章——串（详细总结）
疯子书生的博客
07-13 3098
知识框架： 4.2 串的定义和实现 字符串简称串，计算机上非数值处理的对象基本都是字符串数据。 常见的信息检索系统 （如搜索引擎 )、文本编辑程序（如 Word 、问答系统、自然语言翻译系统等，都是以字符串数据作为处理对象的。 4.1.1 串的定义 串（string）是由菱格或多个字符组成的有限序列。 一般记为： S=‘a1a2···an’ (n>=0) S为串名，单引号括起来的字符序列是串的值。 ai可以是字母、数字或其他字符。 串中字符的个数n称为串的长度。 n=0的串称为空串（
数据结构基础--线性表
Z_2021_10_16_P的博客
06-19 513
线性表 ------ 顺序表、链表
vue2 添加数据不是响应式的处理方法
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
01-31 912
vue2 添加数据不是响应式的处理方法
如何让vue中data中的数据不是响应式的
n_j_q的博客
03-11 1749
vue中data数据可以不发生响应式变化
vue 嵌套iframe第一次无数据_Web前端：Vue基础课程详解
weixin_39841709的博客
11-21 406
大家好，我来了，本期为大家带来的前端开发知识是”Web前端：Vue基础课程详解“，有兴趣做前端的朋友，和我一起来看看吧！1.Vue框架描述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工...
Vue项目优化
qq_40783848的博客
09-16 507
Vue项目优化？听说面试会有这个！ 没办法！搞起来！ 书写习惯 1. 数据规格化(不需要做响应式的数据不要放到data中) 不要把所有的数据都放到data中，只把你需要做响应式的数据放到data中。 如果一个数据放到了data中，vue会给这个数据添加一个getter和setter，当你获取数据调用getter，当你设置数据调用setter，性能不高。 具体内容可以参照vue中是如何实现MVVM...
vue实际运用五：不需要响应式的数据的处理
GTbond的博客
12-23 5871
不需要响应式的数据的处理 在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。 // 方法一：将数据定义在data之外 data () { this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } this.list2 = { xxxxxxxxxxxxxxxx
vue中常用的响应式方法与非响应式方法
qq_46112274的博客
11-09 1361
<body> <div id="app"> <ul> <li v-for="item in letters" :key="item">{{item}}</li> </ul> <button @click="btnClick">按钮</button> </div> <script src="../js/vue.js"></scri
vue面试题（全）
一个比较懒散的IT男
02-21 2725
初级（简单） 1:Vue 解决了什么问题 ① 虚拟 dom：dom 操作时非常耗性能的，不再使用原生的 dom 操作节点，极大的解放 dom 操作，但具体操作的还是 dom，不过是换了一种方式。 ② 视图、数据、结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
vue的非响应式情况
weixin_44889992的博客
05-15 1150
vue的非响应式情况 数组的下标 <div id="app"> <button @click = "change"> 点击 </button> <ul> <li v-for = ' (item,index) in list ' :key = 'index'> <p&g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值