vue遇到的一些問題
- 動態獲取DOM元素以及相關屬性方法操作
- vue2封裝了
setTimeout函數，會返回一個含有 _id 屬性的對象，傳參clearTimeout （_id）；
注意：函數執行時是否新建了一個計時器/延遲器；運用
window.setTimeout()、window.clearTimeout()加前綴；
- 原生事件
function($event)中$event.currentTarget事件綁定的元素和$event.target事件觸發的元素； - @vue/cli 3 的配置問題：根目錄下用
vue.config.js合併配置
module.exports = {
// publicPath type:{string} default:"/"默認域的根目錄下
// 部署子路徑上，需要指定"/subPathName/"，或相對路徑"./"
publicPath: "./",
// outputDir type:{string} default:"dist"
outputDir:"dist",
// outputDir type:{string} default:""默認當前目錄下
assetsDir:"",
// indexPath type:{string} default:"index.html"當前目錄下生成指定路徑
indexPath:"index.html",
// 文件名哈希前綴，控制緩存
filenameHashing:true,
// pages:{type:{Object}} 多頁面模式配置
pages:{
index:{
entry:"src/main.js",
template:"public/index.htmml",
// 輸出文件名
filename:"index.html",
title:"Index Page Title"
},
subpage:"src/subpage.js"
},
// 是否使用eslint
lintOnSave:true,
// webpack配置
chainWebpack:()=>{},
configureWebpack:()=>{},
// 生產環境源映射
productionSourceMap:false,
// css相關配置
css:{
extract:true,//是否使用分離插件
sourceMap:false,
loaderOptions:{},
modules:false
},
parallel:require("os").cpus().length > 1,
pwa:{},
// 開發服務器，支持webPack-dev-server的所有選項
devServer:{
port:8080,
host:"0.0.0.0",
https:false,
// 自動啓動瀏覽器
open:false,
// 配置跨域，調用不同域的資源
proxy:{
"/api":{
target:"<url>",
changeOrigin:true
ws:true,
pathRewrite:{
"^api":""
}
},
"/foo":{
target:"<other_url>"
}
},
// 配置跨域處理，只有一個代理
before:app=>{}
},
// CORS設置crossorigin,integrity,
// 第三方插件配置
pluginOptions:{}
}
- computed計算數據；watch監視數據；$set對象屬性；updated鉤子更新DOM；
- 父子組件通信：
props，$emit，$on實現；
store模式：數據總線，數據共享 => flux框架；
//main.js
const courseoOfTruth = {};
const vmA = new Vue({
data:courseOfTruth
})
const vmB = new Vue({
data:courseOfTtuth
})
//test.vue 不易調試
this.$root.$data
//store.js
//store模式，集中管理，自定義調試函數
var store = {
debug:true,
state:{
message:"hello"
},
setMessageAction(newValue){
if(this.debug) console.log("setMessageAction triggered with",newValue)
this.state.message = newValue
},
clearMessageAction(){
...
}
}
//不直接修改store。state，通過action函數改變 => flux框架
var vmA = new Vue({
data:{
privateState:{},
sharedState:store.state
}
})
var vmB = new Vue({
data:{
privateState:{},
sharedState:store.state
}
})
路由間通信：const bus = new Vue()新建橋樑實例bus.js，通過$emit，$on傳遞；
//bus.js 創建通信實例
import Vue from 'vue'
const bus = new Vue()
export default bus
//test.vue
import bus from './bus.js';
bus.$emit('eventChange',data);
//test2.vue
import bus from './bus.vue';
bus.$on('eventChange',(data)=>{....})
- 路由跳轉
router-link :to；$router.push({name:"[name]",path:"./",query:{...}})；$router.replace{path：‘/’ }；
獲取當前路由的參數值
this.$route.query.xxx/this.$route.params.xxx
-
vuex狀態管理：
store.js創建全局state數據或actions方法，通信；
mutatiions更新state數據後，getters更新後的state下“數組/對象”數據時DOM渲染後沒有重新渲染數據，組件內computed對應的getters獲得的數據需要watch數據的變化，以重新DOM渲染數據； -
資源加載的優化？<%= BASE_URL %> 的理解？
-
通過
import的方式加載assets/靜態資源，多個資源時需一個個引入；
模板引用需要定義data後，賦值data；
封裝require函數批量加載多個靜態資源(file-loader)：
//data中配置靜態資源數據；
getData(){
this.data.forEach(e=>{
e.src = require(e.url);
//或: this.$set(e,"src",e.url);
})
}
- 資源決定規則：
- 相對URLs：
./assets/logo.png被解釋爲一個模塊依賴，輸出爲config.js配置的URL； - 無前綴URLs：
assets/logo.png被處理爲相對URLs並轉化爲./assets/logo.png； - 帶
~的URLs：被解釋爲模塊請求，類似於some-module/image.png； - 特權相對URLs：
/assets/logo.png完全不作處理； - @URL：webpack的路徑別名，具體看配置；
- 攔截器？
- 全局註冊組件、局部組件？相關延伸？全局組件攔截器？Vue.extend(),Vue.component()??
- VUE事件父子元素間的捕獲與冒泡：
- 原生JS中event.preventDefault()阻止默認事件，event.stopPropagation()阻止事件冒泡，addEventListener 第三參數事件捕獲模式
- VUE中修飾符
.prevent阻止默認事件，.stop阻止事件冒泡，.self只event.target當前元素自身觸發，.capture事件捕獲模式，即元素自身觸發的事件先處理，再向內元素進行，.once只觸發一次，.passive不阻止默認事件； - 如何父級觸發事件，子級不觸發父級綁定的事件？
修飾符可以鏈接：順序很重要
@click.prevent.self和@click.self.prevent不同