想实现一个展开单选组件

未标题-1.jpg

选择不同项时更改列表项排列
于是我很快写了一个组件

<template>
  <div>
    <span class="expand-select-list">
      <label style="color: #999;float: left;margin: 6px 10px 0 0;">{{title}}</label>
      <ul class="bi-nav-pills">
        <li
          v-for="(item,index) in selectTypes"
          :key="index"
          v-bind:class="{active: item.value==optionValue}"
          v-on:click="onSelect(item)"
        >{{item.name}}</li>
      </ul>
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  props: ["title","selectTypes"],
  methods: {
    onSelect(item) {
      this.optionValue = item.value;
      this.$emit("change:type", item.value);
    }
  },
  mounted(){
    this.optionValue=this.selectTypes[0].value
  }
}
</script>

title 该组件的名称 selectTypes 选择的每一项。
当我测试点击的时候　发现active类没有发生绑定。

开始找原因

• f12看页面发现dom也没有挂载这个类名。
  active类是公共样式里的类名，会不会不能在我这个组件引用。
  于是我改成

 v-bind:class="active"

这下绑定了，说明我的类名没问题

• 这里出了问题 点击事件引起this.optionValue = item.value;
  duggber后发现数据改变了，数据是没问题的，但是页面没更新。
• 直到看到控制台的警告
  
  hhh.png
  
  -------天哪这里的optionValue不是响应式绑定的，没有添加进data里，数据是改变了，但Vue根本不会理你。
  看这张图
  
  68747470733a2f2f636e2e7675656a732e6f72672f696d616765732f646174612e706e67.png

看了染陌大神的learnVue

我的理解就是
1.因为vue没有把数据optionValue添加进一开始响应式绑定里，没有对getter，setter重写
2.更不会在渲染的时候收集render里的数据添加进deps依赖收集容器里。
3.数据改变不会触发setter，数据option Value自己watch不到自己的改变，不会notify到，不会触发自己的updata，没有相应的回调通知组件重新渲染的函数。

关于vue的wanning

1.在vue的生命周期created的时候会完成数据的装载。vue实例的数据对象data有了，$el还没有。
2.在beforemounted会首次调用render方法，解析template模板。渲染的时候发现没有optionValue发出警告。
3.数据视图都准备好组件开始挂载，mounted挂载好在vue data之外的数据不会添加进响应式绑定中，所以视图不会改变。

• 这时应该这样修改

data() {
    return {
     optionValue:this.selectTypes[0].value
    };
  },

附上vue生命周期图

lifecycle.png