vue常见问题总结

使用规范

1. v-if 与v-for

当v-if 与 v-for 一起使用时， v-for比 v-if优先级更高，这意味着v-if将分别重复运行于每个v-for循环中，所以不推荐v-if和v-for同时使用。

推荐方式如下：

<ul v-if="isShow">
	<li v-for=(item, idx) in list :key="idx">
		{{item.name}}
	</li>
</ul>

<template>
	<div v-for="(item, idx) in list" :key="idx">
     	<label>{{item.name}}</label>
        <span>{{item.cost}}</span>
    </div>
</tempale>

2. watch 与 created

如果watch没有加immediate，created先执行，watch后执行；
如果watch加了immediate: true ，watch先执行，此时如果此时watch中用到的数据需要等created方法返回的数据时，会报错。

解决办法：

created() {
	this.wShowUserInfo()
}
wShowUserInfo() {
  let path = window.location.href
  if (path.indexOf('/user/info') > -1)) {
	  Message({
	    message: '真实姓名/社保户别/身份证号不能为空',
	    type: 'warning'
	  });
   }
}

注意：路由一定要有子路由，监听变化也紧局限在父子路由中，也就是我们这个路由一定要有子路由，在子路由跳转过程中会调用watch，能成功监听