微信小程序制作网页_谈一谈vue请求数据放在created好仍是mounted里

谈一谈vue请求数据放在created好还是mounted里好       这篇文章主要介绍了谈一谈vue请求数据放在created好还是mounted里好的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

建议放在created里

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

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

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

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

补充知识:puted,data,prop,mounted,methods,watch

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

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

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

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

加载顺序:

puted区别于method最重要的两点

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

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

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

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

这就意味着只要 message putedTest计算属性会立即返回之前的计算结果,而不必再次执行函数。

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

调用

 div id="app" 
 h1 {{message}} /h1 
 p {{methodTest}} /p 
 p {{methodTest()}} /p 
 p {{methodTest()}} /p 
 p {{methodTest()}} /p 
 p {{computedTest}} /p 
 p {{computedTest}} /p 
 /div 

在HTML的插值里

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

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

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 + 'puted'
})

putedTest方法会做一次计算,返回一个值,putedTest方法是不会重新计算的,也就是说test3-1,test3-putedTest方法重新计算的结果。

这样的好处也是显而易见的,同样的,putedTest的返回值,那么毫无疑问,这相对于methods而言,将大大地节约内存

computed的其它说明

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

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

computed和watch

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

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

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


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

puted计算属性来监视数据的变化,puted“自动”,手动设置使代码变复杂。

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


相关阅读