谈一谈vue请求数据放在created好还是mounted里好


Posted in Javascript onJuly 27, 2020

建议放在created里

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

如果在mounted钩子函数中请求数据可能导致页面闪屏问题

其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了

补充知识:vue各阶段数据可使用情况:created,computed,data,prop,mounted,methods,watch

created时,可用data和prop中的数据。

computed的属性,当在mounted或者dom中使用到时,才会属性的执行代码。

最后是mouted,可使用前面的数据,并且此时才可以操作dom。

watch不会再创建阶段自动执行,除了添加立即执行这个配置项。

加载顺序:

谈一谈vue请求数据放在created好还是mounted里好

在官方文档中,强调了computed区别于method最重要的两点

computed是属性调用,而methods是函数调用

computed带有缓存功能,而methods不是

计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值。

let vm = new Vue({
 el: '#app',
 data: {
  message: '我是消息,'
 },
 methods: {
  methodTest() {
   return this.message + '现在我用的是methods'
  }
 },
 computed: {
  computedTest() {
   return this.message + '现在我用的是computed'
  }
 }
})

这就意味着只要 message 还没有发生改变,多次访问 computedTest计算属性会立即返回之前的计算结果,而不必再次执行函数。

相比而言,只要发生重新渲染,method 调用总会执行该函数。

调用

<div id="app">
 <h1>{{message}}</h1>
 <p class="test1">{{methodTest}}</p>
 <p class="test2-1">{{methodTest()}}</p>
 <p class="test2-2">{{methodTest()}}</p>
 <p class="test2-3">{{methodTest()}}</p>
 <p class="test3-1">{{computedTest}}</p>
 <p class="test3-2">{{computedTest}}</p>
</div>

在HTML的插值里

computed定义的方法我们是以属性访问的形式调用的,{{computedTest}}

但是methods定义的方法,我们必须要加上()来调用,如{{methodTest()}},否则,视图会出现test1的情况,见下图

谈一谈vue请求数据放在created好还是mounted里好

computed的缓存功能

在上面的例子中,methods定义的方法是以函数调用的形式来访问的,那么test2-1,test2-2,test2-3是反复地将methodTest方法运行了三遍,如果我们碰到一个场景,需要1000个methodTest的返回值,那么毫无疑问,这势必造成大量的浪费

更恐怖的是,如果你更改了message的值,那么这1000个methodTest方法每一个又会重新计算。。。。

所以,官方文档才反复强调对于任何复杂逻辑,你都应当使用计算属性

computed依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值

let vm = new Vue({
 el: '#app',
 data: {
  message: '我是消息,'
 },
 methods: {
  methodTest() {
   return this.message + '现在我用的是methods'
  }
 },
 computed: {
  computedTest() {
   return this.message + '现在我用的是computed'
  }
 }
})

如上例,在Vue实例化的时候,computed定义computedTest方法会做一次计算,返回一个值,在随后的代码编写中,只要computedTest方法依赖的message数据不发生改变,computedTest方法是不会重新计算的,也就是说test3-1,test3-2是直接拿到了返回值,而非是computedTest方法重新计算的结果。

这样的好处也是显而易见的,同样的,如果我们碰到一个场景,需要1000个computedTest的返回值,那么毫无疑问,这相对于methods而言,将大大地节约内存

哪怕你改变了message的值,computedTest也只会计算一次而已

computed的其它说明

computed其实是既可以当做属性访问也可以当做方法访问

computed的由来有一个重要原因,就是防止文本插值中逻辑过重,导致不易维护

computed和watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:watch 属性,在路由场景有使用:vue学习之router

当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch,更好的想法是使用 computed 属性而不是命令式的 watch 回调:

<div id="demo">{{ fullName }}</div>

var vm = new Vue({ 
 el: '#demo', 
data: { 
 firstName: 'Foo',
 lastName: 'Bar', 
  fullName: 'Foo Bar'
 }, 
 watch: { 
 firstName: function (val) { 
  this.fullName = val + ' ' + this.lastName 
 }, 
 lastName: function (val) {  

this.fullName = this.firstName + ' ' + val 
 }
 }
})

上面代码是命令式的和重复的。将它与 computed 属性的版本进行比较:

var vm = new Vue({ 
el: '#demo', 

data: { 


firstName: 'Foo', 


lastName: 'Bar' 

}, 

computed: { 


fullName: function () {  




return this.firstName + ' ' + this.lastName 


} 

}
})

当需要在数据变化时执行异步或开销较大的操作时,使用watch比较合适。

总之:尽量用computed计算属性来监视数据的变化,因为它本身就这个特性,用watch没有computed“自动”,手动设置使代码变复杂。

以上这篇谈一谈vue请求数据放在created好还是mounted里好就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
vue之浏览器存储方法封装实例
Mar 15 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
使用JS实现动态时钟
Mar 12 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
JS倒计时两种实现方式代码实例
Jul 27 #Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 #Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 #Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 #Javascript
Element PageHeader页头的使用方法
Jul 26 #Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 #Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
php数组和链表的区别总结
2019/09/20 PHP
javascript 短路法代码精简
2009/08/20 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python中实现k-means聚类算法详解
2017/11/11 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
在双python下设置python3为默认的方法
2018/10/31 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
社会实践自我鉴定
2013/11/07 职场文书
求职信模版
2013/11/30 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
安阳殷墟导游词
2015/02/10 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python