vue遇到的一些问题（持续更新）_vue2 window.settimout-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36484899/article/details/89426655

本文深入探讨Vue.js的关键特性，包括动态DOM操作、事件处理、组件通信、路由管理及状态管理。解析@vue/cli3配置，阐述计算属性、监听器、数据更新钩子等高级功能，以及父子组件、store模式、路由间通信和Vuex状态管理的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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不阻止默认事件；
- 如何父级触发事件，子级不触发父级绑定的事件？