分类：mounted

2020
11-08

vue.js页面加载执行created,mounted的先后顺序说明

created页面加载未渲染html之前执行。mounted渲染html后再执行。由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。补充知识：关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图，重点在于数据，拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上。我们也都知道在Vue父子组件可以通过Props实现父组件... 继续阅读 >

2020
11-06

解决nuxt页面中mounted、created、watch执行两遍的问题

前言：在开发中偶然检查Network请求的时候发现，在页面中created钩子函数中请求了一个接口，但是页面这个页面加载的时候，接口会连续请求两边，然后我就排查是否有其他地方调用了同样的接口，检查了好几遍后发现并没有，WTF，然后我在created中打印了一下，惊奇的发现。。。created会执行两次打印。。。WTF、WTF、WTF，小朋友你是否有很多问号？？？，然后试了下，不光created会执行两遍，mounted也行，就连watch里面监听的也会，... 继续阅读 >

2020
10-09

vue 在methods中调用mounted的实现操作

首先可以在data中先声明一个变量比如sureDelBox:''mounted中--->methods中--->this.sureDelBox(item)直接this调用这时候要传的参数别忘记带上如果你要问在mounted中调用methods中的方法那么如果是我我会直接把这个方法直接写在mounted中补充知识：vue中methods一个方法调用另外一个方法vue在同一个组件内；methods中的一个方法调用methods中的另外一个方法可以在调用的时候this.$options.methods.test2();this.$option... 继续阅读 >

2020
10-08

Vue(定时器)解决mounted不能获取到data中的数据问题

vue中data定义data(){return{isok:10,}}在vue中使用定时器如下mounted是钩子函数mounted(){console.log(this.isok)//能获取isok10setInterval(function(){console.log(this.isok)//不能获取isok},3000);}这是为什么呢？原因就是：定时器的this是指向window的。那有什么方法来解决这个问题呢？答案是有的,两种第一种：用箭头函数：箭头函数中的this指向是固定不变（定义函数时的指向），在vue中指向vue;mou... 继续阅读 >

2020
10-08

vue中父子组件传值,解决钩子函数mounted只运行一次的操作

因为mounted函数只会在html和模板渲染之后会加载一次，但是在子组件中只有第一次的数据显示是正常的，所以需要再增加一个updated函数，在更新之后就可以重新进行取值加载，完成数据的正常显示。beforCreate（创建之前）Created（创建之后）beforMount（载入之前）Mounted（载入之后）beforUpdate（更新之前）Updated（更新之后）beforDestroy（销毁之前）Destroyed（销毁之后）activate（keep-alive组件激活时调用）deactivated（k... 继续阅读 >

2020
10-08

谈一谈vue请求数据放在created好还是mounted里好

建议放在created里created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。如果在mounted钩子函数中请求数据可能导致页面闪屏问题其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了补充知识：vue各阶段数据可使用情况：created，computed，data... 继续阅读 >

2020
10-08

解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题

项目需求：图片加载时，当鼠标滚动至当前图片进行加载并加上上滑特效，实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较。但是mounted钩子函数执行时img图片并未加载出来也就是占位为空，导致图片位置计算出问题。解决这个问题，目前想到几种种方法一、对mounted钩子函数中init方法加上延时mounted:function(){this.$nextTick(()=>{//加上延时避免mounted方法比页面加载早执行或者对img进行块级化设置... 继续阅读 >

2020
10-08

在vue中created、mounted等方法使用小结

created：html加载完成之前，执行。执行顺序：父组件-子组件mounted：html加载完成后执行。执行顺序：子组件-父组件methods：事件方法执行watch：watch是去监听一个值的变化，然后执行相对应的函数。computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值exportdefault{name:"draw",data(){//定义变量sourcereturn{source:newol.source.Vector({wrapX:false}),}},props:{... 继续阅读 >