1. 程式人生 > >vue的理解

vue的理解

001、v-show與v-if的區別
v-show:操作的是元素的display屬性
v-if:操作的是元素的建立和插入
相比較而言v-if的效能要高
002、methods、computed、watch三者的區別
methods是個方法,執行的時候需要事件進行觸發
computed是一個計算屬性,是實時響應的,只要data中的屬性發生了變化那麼就會觸發computed,計算屬 性是基於屬性的依賴進行快取的,methods呼叫的時候需要加(),而computed呼叫的時候是不需要加()
watch屬性監聽,watch用來監聽屬性的變化,當值發生變化的時候來執行特定的函式,watch監聽屬性的時候 會有2個引數newVal和oldVal一個新值一箇舊值
003、vue中自定義指令如何使用
Vue.directive():
引數1:指令名稱
引數2:指令實現的函式,在回撥函式中第一次引數是指令繫結的元素,引數二是一個物件其中物件中有value 屬性代表的是表示式返回的結果,還有modifiers屬性是指令的修飾符
004、vue中元件建立的方式有哪些?
全域性元件和區域性元件
全域性元件 Vue.component();引數1:元件名稱 引數2:元件的配置項
區域性元件 new Vue({ components:{} key值為元件名稱 val值為元件的配置項 })
005、vue中的過濾器如何使用
Vue.filter()
引數1:過濾器名稱
引數2:過濾器實現的方法 該方法中有2個引數 引數1為需要過濾的資料,引數2為過濾器傳遞的引數
006、如何實現父子元件傳值、非父子元件傳值
父元件傳遞子元件: 通過屬性進行傳遞 接受用props屬性進行接受。 props屬性用來接收外部屬性。 在父元件中當子元件當作標籤使用的時候給子元件新增屬性,值為需要傳遞的值。在子元件內部通過props 進行接受。接受的方式有2種,第一種為陣列接受,第二種為物件接受,推薦用第二種,物件形式的可以限制數 據的型別
子元件傳父元件 //方案一 在父元件中當子元件當作標籤使用的時候給子元件繫結自定義方法,子元件通過this.$emit()進行觸發。注意 自定義方法是不需要加()的 //方案二 利用solt插槽作用域。
非父子元件傳值 方案一: 建立公共的Vue物件。通過呼叫Vue中的$on() $emit()進行傳值。需要接受值得一方呼叫$on,需要傳遞值 得一方呼叫$emit()
方案二: 利用觀察者模式封裝$on $emit
007、請說出vue中生命週期函式(鉤子函式)
1、beforeCreate():元件例項剛剛被建立 (el和data並未初始化)
2、created():元件建立完成,屬性已繫結,但DOM還未生成,$el屬性還不存在 (完成data資料的初始化)
3、beforeMount():模板編譯/掛載之前 (完成了el和data初始化)
4、Mounted():模板編譯/掛載之後 (完成掛載)
5、beforeUpdate():元件更新之前
6、updated():元件更新之後
7、beforedestroy():元件銷燬之前
8、destroyed():元件銷燬之後
008、請解釋一下vue的中單向資料流的理解
資料從父級元件傳遞給子元件,只能單向繫結,子元件不能直接修改從父級傳遞過來的資料
資料只能從一個方向來修改狀態,如果父元件給N個子元件進行了資料傳遞。那麼某一個子元件中修改了這個數 據,那麼就會導致其他元件的資料也會發生改變。因此資料只能從一個方向來修改狀態
009、請說下什麼是動態元件,如何使用,以及keep-alive的作用
動態元件: 讓多個元件使用同一個掛載點,並動態進行切換。這就是動態元件
通過保留<component></component> 元素,動態的繫結它的is特性,可以實現動態元件
keep-alive 包裹動態元件(元件)時,會快取不活動的元件例項,而不是銷燬它們
元件切換呼叫的時候本身會被銷燬掉的,只要加上keep-alive進行包裹,就不會被銷燬,而是被快取起來, 下一次使用的時候直接從快取中呼叫
010、請說下元件的生命週期有哪些?
activated && deactivated:
activated:當元件為活躍狀態的時候觸發(活躍狀態:進入頁面的時候)
deactivated:快取狀態的時候觸發
011、vue中solt的使用方式,以及solt作用域插槽的用法
使用方式: 當元件當做標籤進行使用的時候,用slot可以用來接受元件標籤包裹的內容,當給solt標籤新增name屬性的 時候,可以調換響應的位置
插槽作用域: 作用域插槽其實就是帶資料的插槽,父元件接收來自子元件的slot標籤上通過v-bind繫結進而傳遞過來的數 據,父元件通過scope來進行接受子元件傳遞過來的資料
012、為什麼在元件內部data是一個函式而不是一個物件?
因為每次呼叫元件的時候都會重新生成一個物件,如果是一個物件的情況下,data資料會進行復用(因為物件是引 用資料型別),而當data是一個函式的時候每次呼叫的時候就會返回一個新的物件
013、vue中動畫如何實現
哪個元素需要動畫就給那個元素加transition標籤
進入時class的型別分為以下幾種 <name>-enter <name>-enter-active <name>-enter-to
離開時class的型別分為以下幾種
<name>-leave <name>-leave-active <name>-leave-to
如果需要一組元素髮生動畫需要用標籤<transition-group><transition-group>
014、淺談對路由的理解
什麼是路由? 根據不同的url地址展示不同的頁面或者資料。
路由分為前端路由,和後端路由
前端路由: 1、前端路由多用於單頁面開發,也就是SPA。
2、前端路由是不涉及到伺服器的,是前端利用hash或者HTM5的historyApi來實現的,一般用於不同的內 容展示和切換
015、路由跳轉的方式有哪幾種?
1、a標籤進行跳轉。例如<a href="#/home">首頁<a>
2、router-link進行跳轉 例如:<router-link to="/home">首頁<router-link>
3、程式設計式路由 例如:this.$router.push()
016、路由傳值的方式有哪幾種
1、path路徑屬性傳值。例如:path:"/home/:id/name"; 接受的時候通過 this.$route.params
2、query傳值。因為在url中?後面的引數不會被解析,因此我們可以通過query進行傳值。 接受的時候通過 this.$route.query
3、路由解耦。在配置路由的時候新增props屬性為true,在需要接受引數的元件頁面通過props進行接受
4、程式設計式導航 this.$router.push({path:"/home",query:{}});
017、請說出路由配置項常用的屬性及作用
路由配置引數: path : 跳轉路徑
component : 路徑相對於的元件
name:命名路由
children:子路由的配置引數(路由巢狀)
props:路由解耦
redirect : 重定向路由
018、程式設計式導航使用的方法以及常用的方法
路由跳轉 : this.$router.push()
路由替換 : this.$router.replace()
後退: this.$router.back()
前進 :this.$router.forward()
019、如何重定向路由
通過配置路由項中的redirect進行重定向
020、如何實現路由解耦
在路由的配置項中設定props:true 在需要接受元件的內部通過props進行接受
021、如何檢測路由引數的變化
通過屬性監聽來實現或者beforeRouterUpdate()
watch:{ "$router"(){
} }
beforeRouterUpdate(to,from,next);
022、什麼是路由守衛?路由的鉤子函式有哪些?分別說出使用的場景,及用法
1、什麼是路由守衛? 路由跳轉前後做的一些驗證
2、路由常見的鉤子函式 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使用的場景 beforeRouteEnter:當路由進入之前:登陸驗證、熱力圖的記錄、
beforeRouteUpdate:當路由進行更新的時候。如果當前路由發生了變化,但是不需要元件的建立銷燬的過程的 時候,就需要用到這個鉤子函式
beforeRouterLeave:當路由離開的時候、當用戶沒有進行支付離開的時候、當用戶填寫完資訊沒有儲存的時 候......
023、什麼是全域性守衛
beforeEach:全域性守衛。驗證使用者是否登陸
router.beforeEach((to,from,next)=>{ //登陸狀態 let status = false; //所以路由組建的name名字 const nextRouter = ["two","three","detail"];
if(nextRouter.indexOf(to.name)>=0){ if(!status){ router.push({name:"login"}) }else{ next(); } }else{ next(); } })
024、axios與jquery的ajax有什麼不同
axios的優點: 1、從nodejs中建立http請求
2、支援promiseAPI
3、提供了一些併發請求的介面
4、自動轉換json資料
5、客戶端支援防止CSRF/XSRF
ajax的缺點: 1、jQuery專案龐大,單純的使用ajax卻要引入整個Jquery非常不合理
2、基於原生的XHR開發,但是XHR架構並不清晰
025、簡述vuex的資料傳遞流程
當元件進行資料修改的時候我們需要呼叫dispatch來觸發actions裡面的方法。actions裡面的每個方法中都會 有一個commit方法,當方法執行的時候會通過commit來觸發mutations裡面的方法進行資料的修改。 mutations裡面的每個函式都會有一個state引數,這樣就可以在mutations裡面進行state的資料修改 ,當資料修改完畢後,會傳導給頁面。頁面的資料也會發生改變
026、雙向資料繫結的原理
vue實現雙向資料繫結的原理就是利用了 Object.defineProperty() 這個方法重新定義了物件獲取屬性值(get)和 設定屬性值(set)的操作來實現的。
Object.defineProperty() 方法會直接在一個物件上定義一個新屬性,或者修改一個物件的現有屬性, 並返回 這個物件。
027、使用vue的時候會一下子載入所有的東西使得初始化頁面很卡,該如何解決? vue-router解決首次載入緩慢的問題。懶載入簡單來說就是按需載入。
像vue這種單頁面應用,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時, 需要載入的內容過多,時間過長,會出現長時間的白屏,即使做了loading也是不利於使用者體驗,而運用懶載入 則可以將頁面進行劃分,需要的時候載入頁面,可以有效的分擔首頁所承擔的載入壓力,減少首頁載入用時。
用法:在配置路由時使用:component:resolve=>require([“@components/路由的路徑”],resolve)。 就是用了懶載入後打完包直接執行那個index.html會報錯,報檔案引用錯誤其實是打包時候路徑配置有點問 題,找到build下面的webpack.prod.conf.js 新增 publicPath:"./",
028、vue中的scoped
1. 在vue元件中,在style標籤上新增scoped屬性,以表示它的樣式作用於當下的模組,很好的實現了樣式私有 化的目的,這是一個非常好的機制。
2. scoped肯定是解決了樣式私有化的問題,但同時也引入了新的問題---樣式不易(可)修改,而很多時候, 我們是需要對公共元件的樣式做微調的。所以我才說要謹慎使用 。 029、vue路由傳值params和query的區別
1.query傳參和接收引數 傳參: this.$router.push({ path:'/xxx' query:{ id:id } })
接收引數: this.$route.query.id
注意:傳參是this.$router,接收引數是this.$route,這裡千萬要看清了!!!
2.params傳參和接收引數 傳參: this.$router.push({ name:'xxx' params:{ id:id } }) 接收引數: this.$route.params.id
二者還有點區別,直白的來說query相當於get請求,頁面跳轉的時候,可以在位址列看到請求引數,而 params相當於post請求,引數不會再位址列中顯示
030、跨域的方式
1、jsonp
2、反向代理 用http-proxy-middleware模組 app.use("/api",proxy({
target:"協議+域名", changeOrigin:true }))
3、cors PHP中
031、在Vue中使用外掛的步驟 * 採用ES6的import ... from ...語法或CommonJSd的require()方法引入外掛
* 使用全域性方法Vue.use( plugin )使用外掛,可以傳入一個選項物件Vue.use(MyPlugin, { someOption: true })
032、請列舉出3個Vue中常用的生命週期鉤子函式 * created: 例項已經建立完成之後呼叫,在這一步,例項已經完成資料觀測, 屬性和方法的運算, watch/event事件回撥. 然而, 掛載階段還沒有開始, $el屬性目前還不可見
* mounted: el被新建立的 vm.$el 替換,並掛載到例項上去之後呼叫該鉤子。如果 root 例項掛載了一個 文件內元素,當 mounted 被呼叫時 vm.$el 也在文件內。
* activated: keep-alive元件啟用時呼叫 033、第一次頁面載入會觸發哪幾個鉤子 第一次頁面載入時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子
034、簡單描述每個週期具體適合哪些場景
* beforecreate : 可以在這加個loading事件,在載入例項時觸發
* created : 初始化完成時的事件寫在這裡,如在這結束loading事件,非同步請求也適宜在這裡呼叫
* mounted : 掛載元素,獲取到DOM節點
* updated : 如果對資料統一處理,在這裡寫上相應函式
* beforeDestroy : 可以做一個確認停止事件的確認框
* nextTick : 更新資料後立即操作dom
035、Vue裡面router-link在電腦上有用,在安卓上沒反應怎麼解決?
Vue路由在Android機上有問題,babel問題,安裝babel polypill 外掛解決。
036、vuex的理解:https://www.cnblogs.com/lily-wang/p/9984530.html