谈一谈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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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
PHP设计聊天室步步通
2006/10/09 PHP
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
小程序实现单选多选功能
2018/11/04 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python list转dict示例分享
2014/01/28 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
一道SQL面试题
2012/12/31 面试题
给校长的一封建议书
2014/03/12 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
中学生检讨书范文
2014/11/03 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
环保主题班会教案
2015/08/13 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android