Vue----数据源中数组的操作

点击按钮实现数组中第一个元素改变

代码：

    <div id='app'>

        <button @click="change">改变第一个元素button>

        <p v-for="el in arr">{{el}}p>

    div>

    <script>

        new Vue({

            el:'#app',

            data: {

                arr:["hello","css","js","DOM"]

            },

            methods: {

                change(){

                    // 修改第一个元素的值

                    this.arr[0]="666"

                }

            },

            computed: {}

    })

    script>

运行代码，点击按钮会发现页面上第一个元素并没有被改变，但是数组中的元素改变了吗？

在添加一个按钮来验证

        <button @click="look">验证button>

 methods: {

                change(){

                    // 修改第一个元素的值

                    this.arr[0]="666"

                },

                look(){

                    console.log( this.arr[0])

                }

            },

会发现其实数组中的元素是改变了的，只是页面没有刷新所以就没有渲染到页面上。这是为什么呢？因为对于对象取成员官方是做了劫持的，但是数组取下标正好官方没有做劫持。为什么不做呢？原因很简单，数组的下标是可以有无限个的，换句话说就是劫持不过来。如果把他们都劫持了性能就会很不好。

难道不能修改数组的下标吗？当然不是我们可以使用数组的方法来修改其元素

  change(){

                    // 修改第一个元素的值

                    // this.arr[0]="666"

                    this.arr.splice(0,1,"6666")

                },

或者利用数组取下标的方式修改元素后，刷新页面

       change(){

                    // 修改第一个元素的值

                    this.arr[0]="666"

                    // this.arr.splice(0,1,"6666")

                    Vue.set(this.arr,0,this.arr[0])

                },