VUE重點問題總結
1、組件三種掛載方式
自動掛載
var app3 = new Vue({ el: '#app-3', data: { seen: true } })
手動掛載
// 可以實現(xiàn)延遲按需掛載 <div id="app"> {{name}} </div> <button onclick="test()">掛載</button> <script> var obj= {name: '張三'} var vm = new Vue({ data: obj }) function test() { vm.$mount("#app"); }
// Vue.extend()創(chuàng)建沒有掛載的的子類,可以使用該子累創(chuàng)建多個實例 var app= Vue.extend({ template: '<p>{{message}}</p>', data: function () { return { message: 'message' } } }) new app().$mount('#app') // 創(chuàng)建 app實例,并掛載到一個元素上
2、路由傳遞參數(shù)的方式
<p> <!-- query要用path來引入,params要用name來引入,故不能寫為 :to="{path:'/login',params: {isLogin: true}} --> <!-- 跳轉路由時用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); --> <!-- 接收參數(shù)時用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; --> <router-link :to="{name:'login',params: {isLogin: true}}">親,請登錄</router-link> <router-link :to="{name:'login',params: {isLogin: false}}">免費注冊</router-link> </p> <!-- 路由出口, 路由匹配到的組件將渲染在這里 --> <router-view></router-view>
3、對render:h => h(App)的理解
render:h=>h(App)是ES6中的箭頭函數(shù)寫法,等價于render:function(h){return h(App);}.
1.箭頭函數(shù)中的this是 指向 包裹this所在函數(shù)外面的對象上。
2.h是creatElement的別名,vue生態(tài)系統(tǒng)的通用管理
3.template:‘<app/>',components:{App}配合使用與單獨使用render:h=>h(App)會達到同樣的效果
前者識別<template>標簽,后者直接解析template下的id為app的div(忽略template的存在)
new Vue({ el: '#app', // 相當于 new Vue({}).$mount('#app'); template: '<App/>', // 1、可以通過在 #app 內(nèi)加入<app></app>替代 2、或者 通過 render: h => h(App) 渲染一個視圖,然后提供給el掛載 components: { // vue2中可以通過 render: h => h(App) 渲染一個視圖,然后提供給el掛載 App } });
4、Vue.nextTick()的理解
與DOM相關操作寫在該函數(shù)回調中,確保DOM已渲染
nextTick的由來:
由于VUE的數(shù)據(jù)驅動視圖更新,是異步的,即修改數(shù)據(jù)的當下,視圖不會立刻更新,而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后,再統(tǒng)一進行視圖更新。
nextTick的觸發(fā)時機:
在同一事件循環(huán)中的數(shù)據(jù)變化后,DOM完成更新,立即執(zhí)行nextTick(callback)內(nèi)的回調。
應用場景:
需要在視圖更新之后,基于新的視圖進行操作。
在Vue生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調函數(shù)中。原因是什么呢,原因是在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進行任何渲染,而此時進行DOM操作無異于徒勞,所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數(shù)中。與之對應的就是mounted鉤子函數(shù),因為該鉤子函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成,此時在該鉤子函數(shù)中進行任何DOM操作都不會有問題 。
在數(shù)據(jù)變化后要執(zhí)行的某個操作,而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結構的時候,這個操作都應該放進Vue.nextTick()的回調函數(shù)中。
簡單總結事件循環(huán):
同步代碼執(zhí)行 -> 查找異步隊列,推入執(zhí)行棧,執(zhí)行callback1[事件循環(huán)1] ->查找異步隊列,推入執(zhí)行棧,執(zhí)行callback2[事件循環(huán)2]...即每個異步callback,最終都會形成自己獨立的一個事件循環(huán)。結合nextTick的由來,可以推出每個事件循環(huán)中,nextTick觸發(fā)的時機:
相關文章
Vue自定義指令上報Google Analytics事件統(tǒng)計的方法
我們經(jīng)常需要接入統(tǒng)計服務以方便運營,這篇文章主要介紹了Vue自定義指令上報Google Analytics事件統(tǒng)計的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02Vue實現(xiàn)頁面的局部刷新(router-view頁面刷新)
本文主要介紹了Vue實現(xiàn)頁面的局部刷新(router-view頁面刷新),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12Vue.js教程之a(chǎn)xios與網(wǎng)絡傳輸?shù)膶W習實踐
這篇文章主要給大家介紹了Vue.js之a(chǎn)xios與網(wǎng)絡傳輸?shù)南嚓P資料,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟隨小編一起來學習學習吧。2017-04-04