vue 项目开发，我遇到了这些问题

日常工作中，使用vue进行项目开发居多，因此把一些vue项目常见问题进行总结，在此记录，避免以后开发中做过多的重复工作。

而掌握一些有用的技巧，使用一些更高级的技术点，也能让我们成为更好的 Vue 开发者

Watch immediate

当 watch 一个变量的时候，初始化时并不会执行，如下面的例子，你需要在created的时候手动调用一次。

// bad
created() {this.getsearchText();
},
watch: {searchText: 'getSearchText',
} 

你可以添加immediate属性，这样初始化的时候也会触发,代码也就可以简化成这样

// good
watch: {searchText: {handler: 'getSearchText',immediate: true,}
} 

vue路由跳转打开新窗口

使用 this.$router.resolve

const openNewUrl=(url) => {let routeData = this.$router.resolve({path: url})window.open(routeData.href, '_blank')} 

el-input 限制输入框只能输入数字

el-input 过滤特殊字符或身份证脱敏

v-model拆分为:value和@input

 methods:{idCardValid(val){const idCard= val.replace(/^(\d{6})\d+(\d{4})$/, "$1******$2")console.log(idCard)return idCard} 
}, 

使用a标签下载本地静态资源文件

• 1、public目录下存放要下载的静态资源
• 2、a 标签下载

 点击下载 

检测元素外部(或内部)的单击

例如我们检测一个id为 target 的 div 目标元素

let el= document.querySelector('#target')
window.addEventListener('mousedown', e => {
  // 获取被点击的元素
  const clickedEl = e.target;
  
  if (el.contains(clickedEl)) {
   //在 "el "里面点击了
  } else {
   //在 "el "外点击了
  }
}); 

iframe框架内页面控制父框架页面跳转到某地址

const { href } = this.$router.resolve({ path: "/index", query: { key: key } });
// iframe 控制父页面跳转
window.parent.window.location.href = href 

hookEvent

组件内使用

开发中用到定时器时我们一般这样

// bad
mounted() {// 创建一个定时器this.timer = setInterval(() => {// ......}, 500);},// 销毁这个定时器。
beforeDestroy() {if (this.timer) {clearInterval(this.timer);this.timer = null;}
} 

而借助 hook，可以更方便维护

// good
mounted() {let timer = setInterval(() => {// ......}, 500);this.$once("hook:beforeDestroy", function() {if (timer) {clearInterval(timer);timer = null;}});} 

监听子组件生命周期函数

原本

//父组件

method () {
 onChildMounted() {
 // do something...
 }
},

// 子组件
mounted () {
 this.$emit('childMounted')
}, 

hooks：

//父组件

method () {onChildMounted() {// do something...}
}, 

在Vue组件中，可以用过$on,$on