VUE重点问题总结

　　

<强> 1,组件三种挂载方式
　　

　　

自动挂载

　　 　　 　　var app3=new Vue ({ 　　埃尔:“# app-3 ', 　　数据:{ 　　看到:真 　　} 　　}) 　　 　　

手动挂载

　　 　　//可以实现延迟按需挂载 　　& lt; div id=坝τ谩北?{{名称}}& lt;/div> 　　& lt; button>挂载& lt;/button> 　　& lt; script> 　　var obj={名称:“张三'} 　　var vm=new Vue ({ 　　数据:obj 　　}） 　　功能测试(){ 　　vm。美元山(“#应用”); 　　} 　　 　　 　　//Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例 　　应用var=Vue.extend ({ 　　模板:“& lt; p>{{消息}}& lt;/p>”, 　　数据:函数(){ 　　返回{ 　　消息:“消息” 　　} 　　} 　　}） 　　新应用程序()。美元山(#应用)//创建应用实例,并挂载到一个元素上 　　 　　

<强> 2路由传递参数的方式

　　 　　 　　& lt; p> 　　& lt; !——查询要用路径来引入,参数个数要用名字来引入,故不能写为:="{路径:/登录,参数:{isLogin:真}}——比; 　　& lt; !——跳转路由时用。路由器:美元。美元router.push({名称:“登录”,参数:{isLogin:真}});美元。路由器。推动({路径:/登录,查询:{isLogin:真}});——比; 　　& lt; !——接收参数时用。路线:美元。route.query美元。isLogin和。route.params.isLogin美元;——比; 　　& lt; router-link:="{名称:“登录”,参数:{isLogin:真}}”在亲,请登录& lt;/router-link> 　　& lt; router-link:="{名称:“登录”,参数:{isLogin:假}}”在免费注册& lt;/router-link> 　　& lt;/p> 　　& lt; !——路由出口,路由匹配到的组件将渲染在这里——比; 　　& lt; router-view> & lt;/router-view> 　　 　　

<强> 3,对渲染:h=比;h (App)的理解
　　

　　

渲染:h=祝辞;h (App)是ES6中的箭头函数写法,等价于渲染:函数(h){返回h (App);}。

　　

1。箭头函数中的这个是指向包裹这所在函数外面的对象上。

　　

2. h是creatElement的别名,vue生态系统的通用管理

　　

3.模板:& lt; app/祝辞,组件:{应用}配合使用与单独使用渲染:h=祝辞;h (app)会达到同样的效果

　　

前者识别& lt; template>标签,后者直接解析模板下的id为应用程序的div(忽略模板的存在)

　　 　　 　　新Vue ({ 　　el: #应用,//相当于新Vue({})。山美元(“#应用”); 　　模板:& lt; App/祝辞,//1,可以通过在#应用内加入& lt; app> & lt;/app>替代2,或者通过渲染:h=比;h (App)渲染一个视图,然后提供给el挂载 　　组件:{//vue2中可以通过渲染:h=比;h (App)渲染一个视图,然后提供给el挂载 　　应用程序 　　} 　　}); 　　 　　

<强> 4,Vue.nextTick()的理解
　　

　　

与DOM相关操作写在该函数回调中,确保DOM已渲染

　　

<强> nextTick的由来:

　　

由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
　　

　　

<强> nextTick的触发时机:

　　

在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(回调)内的回调。

　　

<强>应用场景:

　　

需要在视图更新之后,基于新的视图进行操作。

　　

在Vue生命周期的创建()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在()创建钩子函数执行的时候DOM其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是安装钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题。
　　

　　

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
　　

　　

<强>简单总结事件循环:

　　

同步代码执行→查找异步队列,推入执行栈,执行callback1[事件循环1]→查找异步队列,推入执行栈,执行callback2[事件循环2]…即每个异步回调,最终都会形成自己独立的一个事件循环。结合nextTick的由来,可以推出每个事件循环中,nextTick触发的时机:

VUE重点问题总结