谈一谈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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
vue实现提示保存后退出的方法
Mar 15 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP多进程编程实例详解
2017/07/19 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
python控制台中实现进度条功能
2015/11/10 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
集体婚礼证婚词
2014/01/13 职场文书
劲霸男装广告词
2014/03/21 职场文书
求职信名称怎么写
2014/05/26 职场文书
股指期货心得体会
2014/09/13 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2014年度安全工作总结
2014/12/04 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
好人好事新闻稿
2015/07/17 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
react 项目中引入图片的几种方式
2021/06/02 Javascript