谈一谈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 相关文章推荐
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jquery常用操作小结
Jul 21 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
Vue实现todo应用的示例
Feb 20 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
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
keras中的History对象用法
2020/06/19 Python
python元组拆包实现方法
2021/02/28 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
冰峪沟导游词
2015/02/09 职场文书
2016年情人节广告语
2016/01/28 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
在Python中如何使用yield
2021/06/07 Python
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript