初次使用vue总结

vue之旅

本人也是第一次使用vue进行项目开发，在此之前vue经验较少，只是简单学习以及demo，在实际项目中还是有很多不足之处，所以遇到一些疑难杂症（可能问题比较简单，但对于小白的我来说还是需要花时间去解决的）。项目使用的是SPA模式。

v-if与v-show

使用过vue的都知道v-if与v-show的区别以及使用场景：
v-if：在渲染dom时判断是否满足条件，满足渲染dom，不满足不进行dom渲染
v-show：不管满不满足都渲染dom，只是不满足时隐藏，满足时展示；
所以对于使用时就要谨慎：
1、dom主要动画支持，这个时候就需要用v-show，v-if直接不渲染dom，这样就没有办法进行动画消失效果
2、需要考虑一下使用v-if的性能问题，v-if是创建以及销毁，所以频繁切换时不建议使用v-if

click绑定问题

有一个需求是tab切换时需要选中高亮当前还原其他的，
html代码如下

 <p
   v-bind:class="version === '1001' ? 'active':''"
   @click="selectType('1001','tab1')"
 >tab1</p>

 <p
   v-bind:class="version === '1002' ? 'active':''"
   @click="selectType('1002','tab2')"
 >tab2</p>

这样写在语法上是没有错误的，但点击事件会报错，经过查资料得知这种情况是绑定的dom无法区分，所以给每个dom添加一个不同的class进行区分，这样点击事件就正常执行并能够达到需求效果。

 <p class="tab1"
   v-bind:class="version === '1001' ? 'active':''"
   @click="selectType('1001','tab1')"
 >tab1</p>

 <p class="tab2"
   v-bind:class="version === '1002' ? 'active':''"
   @click="selectType('1002','tab2')"
 >tab2</p>

动态改变数据源

经常会有渲染对象或者列表后会进行某些操作改变列表 的某一个字段的值，这个时候就需要动态进行改变字段，
传统的做法是重新处理数据然后进行替换整个数据源；
不过vue提供了可以单独改变某一个字段的方法
一通过直接给某一个字段赋值，但此方法有一个前提就是这个字段是开始渲染数据的时候就存在，不是后期添加的如：

<ul>
<li v-for="(item,index) in list" :key="index">
<span v-text="item.text" v-show="!item.show"></span>
</li>
</ul>

list=[{
	text:"张三"
}]
1、list.set(list[0],''show',false) // 有效
2、list[0].show = false; // 无效
但结果显示2是无效的，因为初始list的是没有show字段的，所以只能用set方法
如果改变text
可以用set，也可以直接list[0].text = '李四';
set方法通用，直接赋值方法只适用初始有此字段的数据；

vuex状态监控

vuex是专门为vue开发的状态管理模式，基础用法请参照官网
项目场景：父组件有多个子组件，每个子组件都会用到变量a，并且需要每个子组件a改变其他组件状态相应需要根据其改变做相应处理，此时我用的是监听vuex里面的变量a；
用法：

父组件调用
<children-components1 :a="a">
<children-components2 :a="a">
<children-components3 :a="a">


组件children-components1

<div v-show="a">
</div>


组件children-components2

<div v-show="!a">
</div>


组件children-components3 

<div v-text="!a:'文本1'?'文本2'">
</div>

组件共用一个状态a来做不同的处理，
此时可以用computed用来监听

每个子组件都写上

computed:{
	a(){
		var status = this.$store.state.a;
		// 逻辑处理
		return //需要返回的值
	}
}

缺点限制：
1、这个必须要在所有需要监听的子组件都加上
2、dom必须使用此变量，并且组件内部data属性不能加上此字段
此需求还可以用不用状态管理，用父子组件传值，详见父子组件传值传复杂数据类型

父子组件传值

父组件向子组件传值时，子组件用props接收，子组件不能改变父组件传的值，如果传值需要通过事件向父组件传值；
但实际项目中却发现有些复杂类型子组件是可以改变的
首先父子通信传值可以传值简单和复杂类型：
1、传简单类型（Number、Boolean、String）
此时子组件改变值时会报错，原因官网已做解释；

2、复杂类型（Object、Array）

父组件
<children1 :obj="obj" :colors="colors" :arr="arr"/>
<div>
  <span :class="colors">父组件string颜色</span>
  <br>
  <span :class="obj.colors">父组件obj颜色</span>
  <br>
  <span :class="arr[0]">父组件arr颜色</span>
  <br>
</div>

子组件1
<div class="children1">
   <span:class="colors">string颜色</span>
   <br>
   <span :class="obj.colors">obj颜色</span>
   <br>
   <span :class="arr[0]">arr颜色</span>
   <br>
   <button type="button" @click="colorClick('red')">红色</button>
   <button type="button" @click="colorClick('blue')">蓝色</button>
   <button type="button" @click="colorClick('black')">黑色</button>
 </div>
export default {
  name: "children1",
  props: {
    colors: {
      type: String,
      default: ""
    },
    obj: {
      type: Object,
      default: function() {
        return {
          colors: ""
        };
      }
    },
    arr: {
      type: Array,
      default: function() {
        return ["red"];
      }
    }
  },
  methods: {
    colorClick(color) {
      this.colors = color;
      this.obj.colors = color;
      this.arr[0] = color;
    }
  }
};
</script>

点击子组件颜色改变时，父组件颜色也相应改变了

所以如果父组件传复杂类型数据时，父组件和子组件数据是同时改变的，（猜想复杂类型所有组件指向的变量的地址，所以一个组件内部改变变量，其他的组件的值也会改变）

v-for和v-if同时使用

在项目中会存在一些场景v-for和v-if同时存在一个标签上，但这样会存在一些问题，所以这种情况可以加上template标签：

<!-- template解决v-for和v-if不能在同一个标签的问题 -->
      <template v-for="(item, index) in value">
        <li v-if="!type" :key="index">
          <span  v-text="item.content"></span>
        </li>

以上是本次使用vue的一些简单总结，希望对大家有所帮助，后续会继续完善；
PS：第一次写博客，排版和描述可能会有一些缺陷o(╥﹏╥)o，希望大家能够多多包涵，后面会继续加油提升