vue遇到的一些問題(持續更新)

vue遇到的一些問題

  1. 動態獲取DOM元素以及相關屬性方法操作
  2. vue2封裝了setTimeout函數,會返回一個含有 _id 屬性的對象,傳參clearTimeout (_id);

注意:函數執行時是否新建了一個計時器/延遲器;運用window.setTimeout()、window.clearTimeout()加前綴;

  1. 原生事件function($event)$event.currentTarget事件綁定的元素和$event.target事件觸發的元素;
  2. @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:{}
}
  1. computed計算數據;watch監視數據;$set對象屬性;updated鉤子更新DOM;
  2. 父子組件通信: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)=>{....})
  1. 路由跳轉router-link :to$router.push({name:"[name]",path:"./",query:{...}})$router.replace{path:‘/’ }

獲取當前路由的參數值this.$route.query.xxx / this.$route.params.xxx

  1. vuex狀態管理:store.js創建全局state數據或actions方法,通信;
    mutatiions更新state數據後,getters更新後的state下“數組/對象”數據時DOM渲染後沒有重新渲染數據,組件內computed對應的getters獲得的數據需要watch數據的變化,以重新DOM渲染數據;

  2. 資源加載的優化?<%= BASE_URL %> 的理解?

  3. 通過import的方式加載assets/靜態資源,多個資源時需一個個引入;
    模板引用需要定義data後,賦值data;
    封裝require函數批量加載多個靜態資源(file-loader):

//data中配置靜態資源數據;
getData(){
		this.data.forEach(e=>{
			e.src = require(e.url);
			//或: this.$set(e,"src",e.url);			
		})
	}
  1. 資源決定規則:
  • 相對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的路徑別名,具體看配置;
  1. 攔截器?
  2. 全局註冊組件、局部組件?相關延伸?全局組件攔截器?Vue.extend(),Vue.component()??
  3. VUE事件父子元素間的捕獲與冒泡:
    • 原生JS中event.preventDefault()阻止默認事件,event.stopPropagation()阻止事件冒泡,addEventListener 第三參數事件捕獲模式
    • VUE中修飾符.prevent阻止默認事件,.stop阻止事件冒泡,.self只event.target當前元素自身觸發,.capture事件捕獲模式,即元素自身觸發的事件先處理,再向內元素進行,.once只觸發一次,.passive不阻止默認事件;
    • 如何父級觸發事件,子級不觸發父級綁定的事件?

修飾符可以鏈接:順序很重要@click.prevent.self@click.self.prevent不同

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章