Vue2之set方法和计算属性computed

一、利用set方法修改data中数组的值

1.我们运行以下代码的时候，本意想点击click按钮进行修改数组中索引为0的元素，但是我们运行之后点击以后并不能修改，这是因为vue不允许直接用索引的方式直接修改data中数组的值

 <div id="app">
    
    <button @click="fn()">click</button>
    <ul>
        <li v-for="(val,index) in arr">{{val}}
        </li>
    </ul>    
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
            arr:[1,2,3]
            },
            methods: {
              fn(){
              arr[0]=8;
               
            },    
            },
          
        });
    </script>

2. 这个时候我们可以用到vue的方法set,用法如下，第一个参数是我们要修改的数组，第二个参数是我们要修改的数据的索引，第三个参数是我们要修改为的值；利用这个方法我们就可以很方便的修改数组中的数据了。

    <script>
        new Vue({
            el:"#app",
            data:{
            arr:[1,2,3]
            },
            methods: {
              fn(){
                
                Vue.set(this.arr,0,8);
            },    
            },
          
        });
    </script>

二、计算属性computed

1.我们介绍计算属性之前我们先看一下这个例子，我们想把msg属性的内容反转输出，我们可以通过msg.split("").reverse().join("");进行实现，但是我们每次都需要写这么多代码很不美观也不方便；

   <div id="app">
    <h2>{{msg.split("").reverse().join('')}}</h2>  
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
            msg:'hello world'
            },
        
        });
    </script>

2.我们利用vue的computed属性进行定义msg的反转；但是值得注意的是，计算属性是属性，并不是函数，

 <div id="app">
    <h2>{{reverseMsg}}</h2>  
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
            msg:'hello world'
            },
            computed:{
                reverseMsg:function(){
                    return this.msg.split("").reverse().join("");
                }
            }
        
        });
    </script>

我们就可以利用这个计算属性方便我们的代码优化了。