VUE【vuex固化 数组对象更新检测 key值 事件绑定】

Vue 不支持IE8及以下版本 因为IE8以下无法模拟ES5特性

VUEX 固化

https://github.com/robinvdvleuten/vuex-persistedstate
参考文档：https://www.jianshu.com/p/c22861ec5f21

数组对象更新检测

  <div id="app">
    <button @click="change">改变数据</button>
      <ul>
        <li v-for="(item,index) in color">{{index}}---{{item}}</li>
        <li v-for="(item,key) in person">{{key}}---{{item}}--</li>
        <li v-for="item in list">
            <p>Id: {{item.id}}; price: {{item.price}}</p>
        </li>
      </ul>
  </div>

 <script src="js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        color: ['red','green','white'],
        person: {
          name: 'Alice',
          age: 200,
          skin: 'black'
        },
        list: [
          {
            id: 1,
            price: 200
          },
          {
            id: 4,
            price: 100
          },
          {
            id: 78,
            price: 20
          }
        ]
      },
      methods: {
        // =====================================数组更新检测
          change(){
            //不能触发视图更新
            // this.color[3] = "brown";
            // this.color[1] = 'black';

            //能触发视图更新 
            // this.color.push('brown')
            // this.color.splice(1,1)
            Vue.set(this.color,1,'black')
            this.$set(this.color,1,'black')
          }

        // =====================================对象更新检测
        // change(){
        //   // 在data中注册过的对象的属性发生改变，会触发视图更新
        //   // this.person["age"] = 100

        //   // 没有在data中注册过的对象的属性发生改变，不会触发视图更新
        //   this.person["height"] = 180

        //   // 解决方案
        //   // Vue.set(this.person,"height",180)
        //   // this.$set(this.person,"height",180)
        // }
      }
    })
  </script>

Key值的使用

通过给每项元素设置key值可以解决 ‘渲染中的就地复用问题’

事件绑定

想要查看 事件对象 必须要在绑定事件时 写 $event

VUE与React，Augular区别