谈一谈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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
捕获关闭窗口的脚本
Jan 10 Javascript
什么是JavaScript
Aug 13 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
一个可复用的vue分页组件
May 15 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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防止form重复提交的方法
2013/07/01 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
vue实现的树形结构加多选框示例
2019/02/02 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python多线程分块读取文件
2019/08/29 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
业务员岗位职责
2013/11/16 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis