vue钩子函数创建与安装两者的使用方法有何不同?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在创建与安装选项中作出处理。
首先来看下官方解释,官方解释说了是在实例创建完成后呗立即调用。
在这一步,实例已完成以下配置:数据观测观察者(数据),属性和方法的运算,看/事件事件回调。然而,挂载阶段还没开始,美元el属性目前不可见。
这话的意思我觉得重点在于说挂架阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这时候通过id什么的去查找页面元素是找不到的。
<强>下面看下实例来证明。强>
看这个例子的结果截图如下,此错误证明找不到id为名称的Dom元素。即模板还未渲染成html
所以,一般creadted钩子函数主要是用来初始化数据。
2:安装钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下:
el被新创建的vm。el替美元换,并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素,当安装被调用vm时。el美元也在文档内。
这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。
下面看实例
下面是结果
取到了值,这说明这时候vue模板已经渲染完毕。因此,Dom操作一般是在安装钩子函数中进行的
计算:{}计算属性,什么是计算属性呢,我个人理解就是对数据进行一定的操作,可以包含逻辑处理操作,对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的,只有在相关依赖发生改变时侧能更新变化,以函数的形式返回结果。
然后可以像绑定普通属性一样在模板中绑定计算属性。
& lt; body> & lt; div id=癰ox":类=皗没错,b:真}“比; & lt; div> & lt;/div> {{味精}} & lt; div> 网址{{味精}}的网络协议是:{{msg2}} & lt;/div> & lt;/div> & lt;脚本类型=拔谋?javascript"比; window.οnlοad=function () { 新Vue ({ 埃尔:“# box" 数据:{ 味精:“https://www.baidu.com" }, 计算:{ msg2:函数(){ var s=this.msg.split (“:”) [0]; 返回年代; } } }) } & lt;/script> & lt;/body>
<强> vue请求数据放在创建好还是安装里好强>
<>强建议放在创造里强>
在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
如果在安装钩子函数中请求数据可能导致页面闪屏问题
其实就是加载时机问题,放在创造里会比安装触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了
关于vue钩子函数创建与安装两者的使用方法有何不同问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。